React学习之初入React世界

• JSX 语法

1. JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器装换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。
2. 事实上，JSX 并不需要花精力学习。只要熟悉 HTML 标签，大多数功能就都可以直接使用了。
3. JSX 语法完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML 语法来创建虚拟元素。可以说，JSX 基本语法基本被 XML 囊括了，但也有少许不同。

• React 组件

1. 基本的封装性。
2. 简单的生命周期呈现。
3. 明确的数据流动。

• React 组件的构建方法

1. React.createClass
2. ES6 classes
3. 无状态函数

• React 数据流

在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。state 与 props 是 React 组件中最重要的概念。如果顶层组件初始化 props，那么 React 会向下遍历整颗组件树，重新尝试渲染所有相关的子组件。而 state 只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了 props 作为参数，内部由 state 作为函数的内部参数，返回一个 Virtual DOM 的实现。

• React 生命周期

1. 组件的挂载与卸载：componentWillMount 方法会在 render 方法之前执行，而 componentDidMount 方法会在 render 方法之后执行，分别代表了渲染前后的时刻。还有 componentWillUnmount 代表组件卸载前的状态，在这个方法中，我们常常会执行一些清理方法，如事件回收或是清除定时器。
2. 更新过程是指父组件向下传递 props 或组件自身执行 setState 方法时发生的一系列更新动作。shouldComponentUpdate 是一个特别的方法，它接受需要更新的 props 和 state，让开发者增加必要的条件判断，让其在需要时更新，不需要时不更新。因此，当方法返回 false 的时候，组件不再向下执行生命周期方法。componentWillUpdate 和 componentDidUpdate 这两个生命周期方法很容易理解，对应的初始化方法也很容易知道，他们代表在更新过程中渲染前后的时刻。

• getDerivedStateFromProps(props, state)

在 render() 之前触发，不管是什么原因触发 render() 方法的, 此方法应返回一个对象，用于更新 State, 或返回 null 不更新。

• getSnapshotBeforeUpdate(prevProps, prevState)

在 Dom 改变之前获得一些最新的信息, 此方法的一切返回值都将被传递给 componentDidUpdate 方法中的 snapshot 参数。

• componentDidCatch(err, info)

1. catch js 错误，log 这些 errors，显示一个回调的 UI。
2. 获取错误的时机：during rendering，生命周期函数和子组件的 constructor 函数。
3. 使用 setState() 获取 unhandled JS errors 和 显示回调 UI。

• ReactDOM

1. findDOMNode:React 提供的获取 DOM 元素的方法有两种，其中一种就是 ReactDOM 提供的 findDOMNode，当组件被渲染到 DOM 中，findDOMNode 返回该 React 组件实例相应的 DOM 节点。
2. 为什么说只有在顶层组件我们才不得不使用 ReactDOM 呢？这是因为要把 React 渲染的 Virtual DOM 渲染到浏览器的 DOM 当中，就要使用 render 方法了，该方法把元素挂载到 container 中，并且返回 element 的实例。

• refs

在组件内，JSX 是不会返回一个组件的实例的，它只是一个 ReactElement，只是告诉 React 被挂载的组件应该长什么样。refs 就是为此而生的，它是 React 组件中非常特殊的 prop，可以附加到任何一个组件上。从字面意思来看，refs 即 reference，组件被调用时会新建一个该组件的实例，而 refs 就会指向这个实例，它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。