你不知道的react

1、props其实是JSX属性作为单个对象传递给组件：<Welcome name="john"> {name: 'john'}

2、ReactDOM.render()的作用是将虚拟dom渲染成真正的dom

3、状态更新可能是异步的：this.setState({num: this.state.num + this.props.increment})，因为this.props和this.state可能是异步更新的，所以num的值可能不会正常更新。应该用这种方式：this.setState((preState, props) => ({num: preState.num + props.increment}))

4、react中e是一个合成事件，所以不用担心兼容性问题。通过bind方式像事件处理程序传参，e要放到参数的最后

5、不用担心多次进行setState会造成性能问题，因为react内部会把js事件循环中的消息队列的同一个消息中的setState都进行合并以后再重新渲染组件

6、组件默认配置：static defaultProps = { likedText: '取消', unlikedText: '点赞' }，当没有传入相应的props会直接使用defaultProps

7、如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来

8、当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为

9、React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载

10、所有嵌套在组件中的 JSX 结构都可以在组件内部通过 props.children 获取到，props.children是一个数组，可以通过props.children[0]访问数组的形式吧JSX元素放置在不同的地方，大大提高了复用性，在编写容器类的组件时非常有用

11、通过 PropTypes 给组件的参数做类型限制，可以在帮助我们迅速定位错误，这在构建大型应用程序的时候特别有用；另外，给组件加上 propTypes，也让组件的开发、使用更加规范清晰

12、代码风格：所有事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头。有时候 render() 方法里面的内容会分开到不同函数里面进行，这些函数都以 render* 开头

13、高阶组件是一个函数不是组件，作用其实就是为了组件之间的代码复用。组件可能有着某些相同的逻辑，把这些逻辑抽离出来，放到高阶组件中进行复用。高阶组件内部的包装组件和被包装组件之间通过 props 传递数据

14、context对象：某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的，你可以理解每个组件的 context 就是瀑布的源头，只能往下流不能往上飞。

　　用法：

class Index extends Component {
//它是验证 getChildContext 返回的对象，必写
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

//getChildContext 这个方法就是设置 context 的过程，它返回的对象就是 context（也就是上图中处于中间的方块），所有的子组件都可以访问到这个对象
  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}

class Title extends Component {
//子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>标题</h1>
    )
  }
}

就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。所以最好不要用context，用第三方状态管理库（Redux）代替

15、一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的（比如修改了外部变量，调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload刷新浏览器，甚至是 console.log 往控制台打印数据也是副作用），在函数内部构建变量并修改不是副作用，因为并不会产生外部可观察的变化。纯函数很严格，也就是说你几乎除了计算数据以外什么都不能干，计算的时候还不能依赖除了函数参数以外的数据。

　　为什么要使用纯函数？因为纯函数非常“靠谱”，执行一个纯函数你不用担心它会干什么坏事，它不会产生不可预料的行为，也不会对外部产生影响

16、reducer 是不允许有副作用的。你不能在里面操作 DOM，也不能发 Ajax 请求，更不能直接修改 state，它要做的仅仅是 —— 初始化和计算新的 state

17、redux做了什么？（1）解决组件状态共享的问题（状态提升和context都不是一种最好的方法）（2）提高了修改共享状态的门槛，因为共享的状态如果可以被随意修改，会导致程序出现不可预料的行为

18、react-redux（connect函数和Provider容器组件）：

（1）为什么要用react-redux：react-redux是将redux模式应用到react里，如果直接在react里使用redux（redux和context结合），会造成逻辑重复和组件复用性低，所以react-redux帮我们解决了这个问题

（2）react-redux做了什么：通过props的方式从store里获取数据，好处是提高了组件的复用性（到底什么样的组件才叫复用性强的组件。如果一个组件对外界的依赖过于强，那么这个组件的移植性会很差，就像这些严重依赖 context 的组件一样。如果一个组件的渲染只依赖于外界传进去的 props 和自己的 state，而并不依赖于其他的外界的任何数据，也就是说像纯函数一样，给它什么，它就吐出（渲染）什么出来，我们把这种组件叫做 Pure Component，因为它就像纯函数一样，可预测性非常强，对参数（props）以外的数据零依赖，也不产生副作用。这种组件也叫 Dumb Component，因为它们呆呆的，让它干啥就干啥。写组件的时候尽量写 Dumb Component 会提高我们的组件的可复用性。启发：写组件的时候要考虑a.是否有重复代码，如果有可以把复用的逻辑放在高阶组件中, b.这个组件如果需要复用，是否对外界依赖过强，如果过强，复用性基本为零，最好做成Dumb组件）

（3） react-redux怎么做的：利用connect高阶组件将redux里的state和dispatch通过props的传递给被包装的组件

（4）Provider组件：a.为什么要用Provider组件：Provider组件是一个容器组件，作用就是将作为根组件，并将外界传给它的props.store存放在context里，这样子组件connect的时候就能获取到store了，避免了业务组件里使用context的情况

19、

根据是否需要高度的复用性，把组件划分为 Dumb 和 Smart 组件，约定俗成地把它们分别放到 components 和 containers 目录下。

Dumb 基本只做一件事情 —— 根据 props 进行渲染。而 Smart 则是负责应用的逻辑、数据，把所有相关的 Dumb（Smart）组件组合起来，通过 props 控制它们。

Smart 组件可以使用 Smart、Dumb 组件；而 Dumb 组件最好只使用 Dumb 组件，否则它的复用性就会丧失。

要根据应用场景不同划分组件，如果一个组件并不需要太强的复用性，直接让它成为 Smart 即可；否则就让它成为 Dumb 组件。

还有一点要注意，Smart 组件并不意味着完全不能复用，Smart 组件的复用性是依赖场景的，在特定的应用场景下是当然是可以复用 Smart 的。而 Dumb 则是可以跨应用场景复用，Smart 和 Dumb 都可以复用，只是程度、场景不一样

20、setState()的第二个参数回调函数会在setState完成合并并重新渲染组件后执行，通常建议使用componentDidUpdate()代替此方式使用。第一个参数可以是函数也可以是对象类型，如果后续状态取决于当前状态，建议用函数形式

21、forceUpdate()会跳过shouldComponentUpdate()

22、class属性：defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。CustomButton.defaultProps = {color: 'blue'}

23、 react 确保 componentDidMount 和 componentDidUpdate 期间调用的任何 setState 会在用户看到UI更新之前执行完。

24、componentWillUpdate中不能使用setState的原因是：使用setState会触发shouldComponentUpdate，然后再次触发componentWillUpdate造成无限调用

25、避免在render、getDerivedStateFromProps中出现副作用，应该是纯函数，副作用可以在componentDidMount和componentDidUpdate中使用