React16复习总结

温故而知新，可以为师矣

• 最近在写taro发现对react有些用法不是很熟悉了，抓紧复习一波，顺便把知识点整理出来，供日后准备面试用
• 又加深了对React16的一些设计理解，废话不多说，直接进入主题

React的开发思想以及和其他框架的异同

• 之前写Vue会比较多，命令式模版语法，双向数据流，这里主要区分Vue和React *

• JSX
  就是createElement的语法糖

• 状态提升(lifting state up)
  将共享的状态提升到就近的父组件上，由父组件来同意管理

• 自上而下的数据流(top-down data flow )
  任何可变数据理应只有一个数据源，并保持自上而下的单向数据流，通常在拥有这个数据源的地方对数据做综合处理

• 受控组件与非受控组件
  非受控组件的ref可以拿到dom使react容易结合其他JS库，扩展性更好，createRef

• createContext
  在组件中共享值的方法，等同于是全局的数据

• 纯函数的PureComponent
  shouldComponentUpdate对React组件的性能优化

  // 函数的返回值为 true 时则更新组件，反之则不更新
  const equalMethod = (prevProps, nextProps): boolean => {
    // 定义你的比较逻辑
  }
  const C = React.memo(props => {},equalMethod)

  类似纯函数的PureComponent它内部是对对象进行浅比较

• static getDerivedStateFromProps
  应避免使用props给state赋值，那么更好的取代方法就是

  class C extends React.Component {
    state = {
      y: 0
    }
    static getDerivedStateFromProps(props, state): State {
      if(props.y !== state.y) {
        return {
          y: props.y
        };
      }
    }
  }

• getSnapshotBeforeUpdate
  使用场景一般是获取组建更新之前的滚动条位置

• 新的React生命周期
  1.static getDerivedStateFromProps
  2.shouldComponentUpdate
  3.render
  4.getSnapshotBeforeUpdate
  5.componentDidUpdate
  6.componentWillUnmount

• componentDidCatch
  componentDidCatch 这个函数是 React16 新增的，用于捕获组件树的异常，如果render()函数抛出错误，
  则会触发该函数。可以按照 try catch 来理解和使用，在可能出现错误的地方，
  使用封装好的包含 componentDidCatch 生命周期的组建包裹可能出错的组件

  class PotentialError extends React.Component {
    state = {
      error: false,
    }
    componentDidCatch(error, info) {
      console.error(info);
      this.setState({
        error
      });
    }
    render() {
      if (this.state.error) {
        return <h1>出错了，请打卡控制台查看详细错误！</h1>;
      }
      return this.props.children;   
    } 
  }
  
  const Demo = () => (
    <PotentialError>
      <div>{{a: 1}}</div>
    </PotentialError>
  )

• 看下React16下的完整例子

  import React from 'react'
  
  export default class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      // 初始化state方式（1）
      this.state = {
  
      }
    }
      
    static defaultProps = {
  
    }
  
    // 初始化state方式（2）
    state = {
  
    }
    static getDerivedStateFromProps(props, state) {
      return state
    }
    componentDidCatch(error, info) {
  
    }
    render() {
  
    }
    componentDidMount() {
  
    }
    shouldComponentUpdate(nextProps, nextState) {
      
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
  
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
  
    }
    componentWillUnmount() {
  
    }
  
  }