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就会指向这个实例，它能够是一个回调函数，这个回调函数会在组件被挂载后当即执行。