【翻译】React 16.3 新的生命周期和context api

文章首发于个人我的github博客

这里是原文连接

一段时间之前，咱们写了一篇文章有关咱们即将升级咱们遗留的生命周期方法，包含着咱们慢慢的迁移的策略。在React 16.3.0这个版本中，为了慢慢迁移，咱们增长了一些新的生命周期。咱们也推荐了一些被长期期待的一些特性：一个官方的context api，一个 forwarding ref，一个ergonomic ref。

Official Context API

这么长时间以来，React一直提供了一个实验性的api context.尽管它是一个颇有用的工具，咱们仍是不推荐使用它由于一些隐藏的问题。并且咱们一直计划去用一个更好的api去替代它。

16.3这个版本引入了一个新的context api，它更加的高效，并且他支持各类静态类型检查和很深层次的更新。
这有一个例子来讲明，你能够想象你注入了了一个“theme”变量去使用新的api

const ThemeContext = React.createContext("light")
class ThemeProvider extends React.Component{
    state = {theme: 'light'}
    render(){
        return (
            <ThemeContext.Provider value={this.state.theme}>
                {this.props.children}
            </ThemeContext.Provider/>
        )
    }
}
class ThemeButton extends React.Component{
    render(){
        return (
            <ThemeContext.Consumer>
                {theme => <Button theme={theme} />}
            </ThemeContext.Consumer>
        )
    }
}复制代码

createRef Api

之前，react提供两种方式去管理refs，一个是字符串api，另外一个是经过回调函数。尽管字符串这种方法是两种中最方便的，可是他有一些不完善的地方，因此咱们官方建议是用回调去替代它。
16.3版本中提供了一个新的选项去管理refs，它和字符串方式同样便利，却没有它的缺点。

class MyComponent extends React.Component{
    constructor(props){
        super(props)
        this.inputRef = React.createRef()
    }

    render(){
        return <input type="text" ref={this.inputRef} />
    }

    componentDidMount(){
        this.inputRef.current.focus()
    }
}复制代码

forwardRef Api

一般，React组件是声明式的，可是有些时候有不可避免的会使用一些dom节点在组件的实例中。很一般的一些状况好比管理聚焦，选择或者动画。React提供了refs做为一种方式去解决这个问题。然而，组件封装提出了一些挑战。

例如，若是你用组件替代了,绑定在原先组件的ref属性值就开始指向了外层的包裹组件而不是DOM节点（在函数式的组件中将会是null），这就是被称赞的“application-level”组件就像评论组件同样须要被包装，它可以干扰叶子节点，例如FancyButon组件，他们的使用方式就和dom节点同样，或许他们还会暴露出他们的DOM节点。

Ref forwarding是一个新的特性，让许多组件可以接收ref，而且传给它的子组件。eg：

const FancyButton = React.forwardRef((props,ref) => {
    <button ref={ref} className="FancyButton">
        {this.prop.children}
    </button>
})
const ref = React.createRef()
<FancyButton ref={ref}>click,/FancyButton>复制代码

用这种方式，组建能够将erf传递给DOM button,而且须要的话链接它，就像直接在使用一个dom组件。

固然，ref forwarding并不只局限于向叶子组件渲染dom节点，若是你编写高阶组件的话，咱们建议你用它自动的向那些被包裹的组件传递ref。

Component Lifecycle Changes

React组件的api已经好久没有改动了。然而，当咱们添加了一些新特性（出错处理和异步渲染）以后，咱们延伸出了这种模型尽管他并非咱们最初计划的。

例如，利用现有的api，很容易就能够阻止最初的渲染。这是由于有太多的过程去完成一次渲染。咱们研究发现，出错行为的处理并无被考虑进去，这样就会致使内存泄漏。并且如今的组件也让其余过程复杂化。

这些问题使得组件的生命周期被滥用。（componentWillMount，componentWillReceiveProps，componentWillUpdate）。并且令咱们困惑的是这些错误常常发生在生命周期中。根据这些缘由，咱们决定使用一些更好的选择。

咱们知道这些改变会影响不少已有的组件。所以，咱们会尽量慢慢的迁移，并且咱们会提供一些别的方法。

咱们为了放弃这些不安全的生命周期，咱们提供了几个新的：

• getDerivedStateFromProps：替代componentWillReceiveProps这个生命周期更加安全的方法
• getSnapshotBeforeUpdate： 为了支持在组件更新前更加安全的读取属性

最后，附上此次api更新尝鲜的demo