React基础

React的首要思想是通过组件来开发应用，其本身是一个展示层框架。其理念可以归结为一个公式：$$$$UI=render(data)，UI即用户看到的界面，在React中，UI是函数render的执行结果，函数接受data作为参数。这个函数是一个纯函数，没有任何的副作用，输出完全依赖于输入，即UI完全取决于输入的数据。

Virtual DOM

DOM操作耗时很高，在上个前端时代，需要尽可能的减少DOM操作。而Virtual DOM的理念则是，框架本身来计算出最小的DOM操作，开发人员只需要关注要渲染成什么样的UI即可。其实现原理大致为：Virtual DOM是存在于Javascript中的属性结构数据，每次自上而下渲染组件时，会对比Javascript中这一次产生的Virtual DOM和上一次上次的Virtual DOM，找出其最小差别，然后再去修改Virtual DOM对应的不同的真实的DOM结构即可。这种Virtual DOM方案可以让开发人员不需要直接操作DOM，不仅降低了开发人员的压力，并且保证了渲染的效率。目前基本所有的前端框架都实现了自己的Virtual DOM方案。

组件划分

组件的划分要满足高内聚和低耦合。在React中，展示内容的JSX、定义行为的Javascript、定义样式的CSS都可以放在一个JavaScript文件中。但是目前我司的做法是将CSS样式分离，一个组件一般由一个JSX文件和CSS文件组成。低耦合指的是不同组件之间的依赖关系要尽可能的弱化，也就是每个组件尽量独立。

组件类别

目前React官方推荐的做法是，将一个页面的组件分为容器组件和展示组件：展示组件仅仅负责根据传入的数据进行组件的渲染；容器组件负责从服务器拉取数据、进行数据下分到展示组件等。除了从服务器拉取数据的场景之外，还有用户操作引发的前端和服务器通信，对于这种场景，推荐的做法是：进行数据通信的函数统一在容器组件中定义好，然后将相应的函数以prop的结构传入相应的展示组件中。容器组件和展示组件的划分，有利于行为和展示的分离、展示组件的重用以及日后的维护。

组件数据

React组件的数据分为量两种：prop和state。prop和state的改变，都会引发组件的重新渲染。prop和state的区别在于：prop是组建的对外接口，state是组件的内部状态，对外用prop，内部用state。不过，目前提倡的一种组件是无状态组件，即组件所需要的全部数据通过prop从外部传入。这种无状态组件，可以写成函数的形式，组件的渲染更加快。

我们通常会通过prop给组件传递一些函数，函数的传递我们需要注意的是：函数中的this通常指的是函数定义的组件，传入的函数要使用箭头函数，就可以绑定this对象了。

在组件内部，不能去修改props数据，因为需要保证数据的唯一性，保证数据流是单向的，数据是统一的。

prop可以进行propTypes检查，即检查传入的prop的格式，但是propType得检查只是一个辅助开发的功能，并不会改变组件的行为。并且propTypes放在开发环境中可以辅助开发，但是放在生产环境中不太合适，需要进行自动去除。

className.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
};

prop数据是从组件外部传入的，而state是组件内部的数据，有些组件无法做成无状态组件，需要用到状态，那么就需要定义state。state的定义在constructor函数中，而state的修改需要使用this.setState()函数，虽然使用this.state=***也可以修改state，但是只有使用setState函数才可以达到即修改state又能驱动组件进行渲染的目的。setState函数是一个异步函数，所以通过它修改state，并且立即取this.state的值无法拿到最新的数据。

constructor(props) {
    ...
    this.state = { ... }; // state定义
}

this.setState({ ... }); // state的修改。

数据流

在React中，数据流是单向的，即数据只能从父组件传递到子组件。传递方式为：父组件以prop的形式传递给子组件。如果子组件要传递参数给父组件，则需要通过函数调用的方式，即：在父组件中函数，然后将函数传递给子组件，子组件通过调用父组件传递的函数，来进行反向数据流的传递。