React

一、React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

二、将元素渲染到 DOM 中 

        我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。 

三、更新元素渲染 

        React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

        目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。

        可以将要展示的部分封装起来，用一个函数来表示。

        除了函数外我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props。

四、React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。

JSX 是在 JavaScript 内部实现的。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

五、JavaScript 表达式

        我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。

        在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。 

六、样式

        React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

七、注释

        注释需要写在花括号中。

八、数组

        JSX 允许在模板中插入数组，数组会自动展开所有成员。

九、React 组件

        注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。 

        注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。 

十、复合组件

        我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

十一、React State(状态)

        React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

        React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

        以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。

        添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

十二、将生命周期方法添加到类中

        在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

        每当组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

        同样，每当组件生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

十三、数据自顶向下流动

        父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

        这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

        这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

        如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。

        我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。

十四、React Props

        state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

十五、默认 Props

你可以通过组件类的 defaultProps 属性为 props 设置默认值。

十六、Props 验证

        Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。 

十七、React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确使用 preventDefault。

        你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

        这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

        如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数。

        你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

        这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

        如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数。

十八、挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
  : 在 React 组件挂载之前，会调用它的构造函数。
• getDerivedStateFromProps()
  : 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
• render()
  : render() 方法是 class 组件中唯一必须实现的方法。
• componentDidMount()
  : 在组件挂载后（插入 DOM 树中）立即调用。

render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

十九、更新

每当组件的 state 或 props 发生变化时，组件就会更新。

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• getDerivedStateFromProps()
  : 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
• shouldComponentUpdate()
  :当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
• render()
  : render() 方法是 class 组件中唯一必须实现的方法。
• getSnapshotBeforeUpdate()
  : 在最近一次渲染输出（提交到 DOM 节点）之前调用。
• componentDidUpdate()
  : 在更新后会被立即调用。

render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

二十、卸载

当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount()
  : 在组件卸载及销毁之前直接调用。

二十一、React AJAX

        React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

        当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

二十二、React 表单与事件

        HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。

        在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

         onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。

        你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。

二十三、Select 下拉菜单

在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项。

二十四、多个表单

当你有处理多个 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么。

二十五、React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

使用方法

绑定一个 ref 属性到 render 的返回值上：

<input ref="myInput" />

在其它代码中，通过 this.refs 获取支撑实例:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();