super苹果核的博客

二十四、DOM ElementsReact实现了一个独立于浏览器的DOM系统，用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现（恶心的原生DOM操作）。在React中，所有DOM properties 和 attributes（包括event handle）都应该是驼峰命名法。 例如，HTML属性tabindex对应于React中

二十三、ReactDOM用法如果你使用script标签引用React，那么这些顶级API在全局变量ReactDOM上可直接使用。如果你使用了ES6和npm，你可以这么写import ReactDOM from 'react-dom'。如果你使用ES5和npm，你可以这写var ReactDOM = require('react-dom')。总览react-dom包提供了

二十二、React.Component用法组件(Components)允许您将UI拆分为独立的可重用的部分，并单独的考虑每个部分。总览React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类，并且至少定义一个render()方法即可使用。你可以使用ES6中class定义一个React组件：c

二十一、React顶级API全局变量React是React库的入口。如果你通过一个script标签使用的React，那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6，你可以这样写：import React from 'react';。你是通过npm使用的ES5，你可以这样写var React = require('react');。

二十、用上下文管理应用使用React可以很容易通过React组件跟踪数据流。 当你看到一个组件，你就可以看到哪些props正在传递，这使得你的应用很容易知道在做什么。在某些情况下，你希望通过组件树传递数据，而不是在每个级别的中组件手动传递props，你可以直接在React中使用强大的“context”来做到这一点。为什么不去使用Context绝大多数的应用不需要直接

十九、彻底理解React如何重新处理DOM(Diffing算法)React提供了一个声明式的API，所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的，不过这也让编写应用变得更加容易。本文会详细解释在React中的“diffing”算法是怎么做的，以便组件更新是可预测的，从而让高性能应用变得足够快。动机当使用Re

十八、不使用JSX编写React应用React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX，那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。每个JSX元素只是调用React.createElement(component，props，... children)的语法糖。 所以，你用JSX做的任何事也可以使用纯Javascr

十七、不使用ES6编写React应用通常你可以使用一个JavaScript的class功能来定义一个React组件：class Greeting extends React.Component { render() { return h1>hello {this.props.name}h1>; }}要是你还没有使用ES6的话，你就得使用Reac

十六、性能优化在React内部，React使用了几种比较聪明的技术来实现最小化更新UI所需的昂贵的DOM操作的数量。对于许多应用来说，使用React将很快速的渲染出用户界面，从而无需进行大量工作来专门做优化性能的工作。大概有以下有几种方法来加快你的React应用程序。使用生产环境的配置进行构建如果你在React应用中进行基准测试或这遇到了性能问题，请首先确保

十五、不可控组件在大多数情况下，我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中，表单数据由React组件处理。 替代方法是使用不可控组件，其中表单数据是由DOM本身处理。要编写不可控组件，不需要为每个状态更新都去编写事件处理程序，你可以直接使用ref从DOM获取表单值。例如，此代码在不可控组件中接受一个name：class Name

十四、refs和DOM元素在典型的React数据流中，props是父组件与其子组件交互的唯一方式。 要修改子组件，需要使用一个新的props进行重新渲染。但是，在某些情况下，您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例，也可以是DOM元素。 对于这两种情况，React提供了一个以下这样的功能。通过ref属性设置回调函数React提供

十三、使用PropTypes进行类型检测随着你的应用的变得越来越大，你可以通过typechecking来找到更多的bug。 对于某些应用，您可以使用JavaScript扩展（如Flow或TypeScript）对整个应用程序进行类型检查。即使你不使用这些，React也有一些内置的typechecking能力。 要在组件的props上运行typechecking，可以分配特殊的prop

十二、深入理解JSX从根本上讲，JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码："blue" shadow={2}> Click Me/MyButton>经过编译后为：React.createElement( MyButton, {color

十一、组合 VS 继承React具有强大的组合模式，我们建议使用组合而不是继承来重用组件之间的代码。在本节中，我们将考虑一些新的React常常遇到的开发继承的问题，并展示如何使用组合来解决它们。有容乃大一些组件提前不知道它们的子组件是什么的。 这对于像Sidebar或Dialog这样的代表通用“框”的组件是特别常见的。我们建议这些组件使用特殊的children属

十、提升state通常，如果有几个组件需要反映相同的变化数据。 我们建议将共享state提升到层级最近的，并且是共同的父组件上。 让我们看看这是如何工作的。在本节中，我们将创建一个温度计算器来计算水是否在给定温度下沸腾。我们将从一个名为BoilingVerdict的组件开始。 它接受celsius(摄氏温度)作为props，并打印是否足以煮沸水：function Boi

九、表单处理HTML表单元素与React中的其他DOM元素有点不同，因为表单元素自然地保留一些内部状态。 例如，这种采用纯HTML格式的表单接受单个name：form> label> Name: input type="text" name="name" /> label> input type="submit" value="S

八、Lists和Keys的处理首先，让我们回顾一下如何在JavaScript中遍历lists。下面的代码，我们使用map()函数获取一个数字数组，并将它们的值加倍。 我们将map()返回的新数组赋给变量doubled并记录下来：const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(item => item

七、根据条件选择性渲染元素在React中，您可以根据所需行为来创建并封装的不同组件。 然后，您可以根据某些条件来仅仅渲染其中的某一些。当然，这具体取决于当前应用程序的状态。React中的分条件渲染与JavaScript中的分条件工作方式相同。 使用JavaScript运算符（如if或条件运算符）来创建一个表示当前状态的元素，让React匹配它们然后更新UI。考虑这两个组件：

六、事件处理使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异：React事件使用驼峰命名法，而不是全部小写命名。使用JSX你传递一个函数作为事件处理程序，而不是一个字符串。例如，HTML：button onclick="activeLasers()"> Active Lasersbutton>在Reac

五、State和生命周期考虑前面部分中的滴答时钟示例（第三章）。到目前为止，我们只学习了一种更新UI的方法。我们调用ReactDOM.render()来改变渲染输出：import React from 'react';import ReactDOM from 'react-dom';function tick() { const element = (

四、组件化和属性(props)组件允许您将UI拆分为独立的可重用的部分，并单独地考虑每个部分。从概念上讲，组件就像JavaScript函数。 它们接受任意输入（称为“props”），并返回应该出现在屏幕上的React元素。功能性组件(functional)和类组件(class component)定义组件的最简单的方法是编写JavaScript函数：function W

三、渲染元素React元素是React应用程序的最小构建结构。React元素描述了您想在屏幕上看到什么：const element = h1>hello worldh1>;与浏览器DOM元素不同，React元素是纯对象，创建起来很方便。 React DOM负责匹配React元素并更新DOM。note人们可能将元素与更广为人知的“组件”概念混淆。 我们将在下一节中介绍

二、JSX的介绍首先，请考虑下面的变量声明：const element = h1>hello worldh1>;这个有趣的标签语法，因为它既不是字符串也不是HTML。它被称为JSX，它是JavaScript的语法扩展。 我们建议使用它和React一起使用，以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言，但是它具有JavaScript的全部能力。J

一、安装ReactReact是灵活的，可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序，也可以逐步将其引入现有的项目中，而不需要重写整个项目。创建一个单页面应用Create React App是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境，以便您可以使用最新的JavaScript功能，它提供了一个很好的开发体验，并可以有效