React 16 新特性使用总结

从React 16.0开始，React引入了一下新的特性（组件、API、生命周期函数）。从15.X升级到16.X是一种加强式的升级即以前的用法在新版上保持有效，基本是平滑的升级，可是随着React 16.5的发布，新特性基本已经完善和固定下来，为了享受新版本带来的更高效率架构和更规范的开发流程，如今是时候使用上React ^16.0 的新特性进行代码重构。

我直接使用了React 16.5，具体请查看React 更新日志如下是几个经常使用的新特性，每一个特性都从与以前的比较和实例来讲明：

1、生命周期函数

生命周期函数的改动有两个方面

新增：

static getDerivedStateFromProps(nextProps, prevState) getSnapshotBeforeUpdate(prevProps, prevState) componentDidCatch(error, info)

不安全：

UNSAFE_componentWillMount(nextProps, nextState) UNSAFE_componentWillReceiveProps(nextProps) UNSAFE_componentWillUpdate(nextProps, nextState)

在16.X版本中依然可使用不安全的周期函数（UNSAFE_前缀可加可不加），用法也和以前的同样。可是若是使用了新增的周期函数就不能同时使用不安全的周期函数，不然会报错而且不安全的周期函数不会被执行。

使用新增的周期函数的执行顺序仍是按照阶段来讲明：

装载阶段

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新阶段

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

卸载阶段

componenWillUnMount

新增的生命周期函数

getDerivedStateFromProps周期函数的做用是根据props初始化或更新state，有两个参数分别是nextProps(本次渲染的props)和prevState(当前组件的state)，判断nextProps和prevState对应的属性是否相同，返回须要更改的state。

React 15.X 初始化和更新分别写在constructor和componentWillReceiveProps.
class Parent extends Component{
    render(){
        return (
        <Child age={18} />
        )
    }
}
class Child extends Components{
    constructor(props){
        super(props);
        this.state = {
            age: this.props.age //装载阶段初始化state
        }
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.age !== this.state.age){
            this.setState({
                age: nextProps.age
            }) // 修改state
        }
    }
    render(){...}
}

React 16.5 写在getDerivedStateFromProps便可
class Child extends Component{
    constructor(props){
        super(props);
        this.state = {
            age: ''
        }
    }
    static getDerivedStateFromProps(nextProps,prevState){
        if(nextProps.age !== prevState.age){
            return {
                age: nextProps.age
            }
        }
        return null;
    }
    render(){...}
}
复制代码

getSnapshotBeforeUpdate做用是替代componentWillUpdate,有两个参数分别是prevProps(未更新前的props)和prevState(未更新前的state)。最大的区别是它放在了render函数后执行，为未来的Fiber架构作准备；还有的区别是componetWillUpdate的参数是nextProps(本次更新的props)和nextState(本次更新的state),在转换时须要注意。

列表项数目改变时scroll到最后一条
 getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length !== this.props.list.length) {
      const list = this.listRef.current //dom渲染前的列表元素ref
      return list.scrollHeight - list.scrollTop
    }
    return null
  }
    
  componentDidUpdate(prevProps, prevState, snapshot) {
    // snapshot 是getSnapshotBeforeUpdate返回的偏移量
    if (snapshot !== null) {
      const list = this.listRef.current //dom渲染后的列表元素ref
      list.scrollTop = list.scrollHeight - snapshot
    }
  }

复制代码

componentDidCatch React组件发生错误时的处理逻辑，调用第三方的错误监听服务。

2、Context

使用Context 主要是解决props向多层嵌套的子组件传递的问题，原理是定义了一个全局对象。新的Context的使用方法跟旧的有很大差异

// React 15.x须要本身开发定义提供 Context的父组件，而后用这个父组件包裹嵌套多层的子组件。
class Provider extends Component {
    getChildContext(){
        return {
            age: 18
        }
    }
    render() {
        return this.props.children;
    }
}
Provider.childContextTypes = {
    age: PropTypes.number
};
// 子组件
class Child extends Component {
    constructor(props,context) { 
        super(props,context); //super 带上context 参数
    }
    render(){
        const {age} = this.context; //使用this.context访问
        ...
    }
}
Child.contextTypes = {
    age: PropTypes.number
};

// React 16.5 使用 React.createContext()
const MyContext = React.createContext();
// 使用 MyContext.Provider 包裹子组件
<MyContext.Provider value={{age: 18}}>
    <Child />
</MyContext.Provider>
//子组件使用 MyContext.Consumer得到 Context
class Child extends Component {
    render(){
       return (
       <MyContext.Consumer>
            {(context) => {
                const {age} = context;
                return ...
            }}
       </MyContext.Consumer>
       )
    }
}

复制代码

3、Portal 和 Refs

Portal 是React 16 的全新特性，能够将组件渲染到非根节点其余 DOM 节点上，由于以前版本没有这个功能，因此使用场景须要逐步发掘。用法是使用ReactDOM.createPortal(component, domNode) component是要渲染的组件，domNode是挂载的dom节点。

React 16 使用React.createRef 建立Ref对象，如下是使用的区别：

// React 15.X
class Parent extends Component {
    getChildRef(ref){
        this.myRef = ref;
    }
    render() {
        <Child childRef={this.getChildRef} />
    }
}
class Child extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div ref={this.props.childRef} />
  }
}

// React 16.5
class Parent extends Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
      return <Child ref={this.myRef} />
  }
}

const Child = React.forwardRef((props, ref) =>  <div ref={ref} />);

复制代码