React函数式组件和类组件[Dan]

一篇对Dan的 How Are Function Components Different from Classes? 一文的个人阅读总结，内容来自于此。强烈推荐阅读 Dan Abramov.的博客。

函数式组件和Class组件有什么不同？

Dan很直接的给出了答案：

函数式组件捕获了渲染所用的值。（Function components capture the rendered values.）

直接看结论可能有点不知所云。

class组件可能引发的"错误"

看一个组件，使用setTimeout模拟网络请求，点击button之后警告提示关注某人（user），user从props中读取。

该组件的function版本：

function ProfilePage(props) { const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( <button onClick={handleClick}>Follow</button> ); }

class版本：

class ProfilePage extends React.Component { showMessage = () => { alert('Followed ' + this.props.user); }; handleClick = () => { setTimeout(this.showMessage, 3000); }; render() { return <button onClick={this.handleClick}>Follow</button>; } }

页面组件代码：

class App extends React.Component { state = { user: 'Dan', }; render() { return ( <> <label> <b>Choose profile to view: </b> <select value={this.state.user} onChange={e => this.setState({ user: e.target.value })} > <option value="Dan">Dan</option> <option value="Sophie">Sophie</option> <option value="Sunil">Sunil</option> </select> </label> <h1>Welcome to {this.state.user}’s profile!</h1> <p> <ProfilePageFunction user={this.state.user} /> <b> (function)</b> </p> <p> <ProfilePageClass user={this.state.user} /> <b> (class)</b> </p> <p> Can you spot the difference in the behavior? </p> </> ) } }

对于class组件，在选中状态是userA的时候，点击follow button之后立马将select切换其他人（uerB），三秒之后的弹出框是follow的userB。(这个动作会在后面多次提及）

在选中userA的时候点击关注，目的就是关注userA，但是class组件最后弹出框显示的关注userB，这显然不符合预期。

为什么、如何解决

如果上面例子使用function组件，弹出框显示的就会是正确的，虽然切换到了选中的userB，但是弹出框显示的仍然是点击的那一刻关注的userA。

function组件好像记下了点击那一刻时候的状态？

class组件在这个场景中错误的原因是class组件每次三秒后从this.props.user中读取数据，此时的this.props.user已经变了，已经是切换后的新的this.props.user数据。虽然React中props不可变，但是this是可变的。

类组件会随着时间推移改变，在渲染方法和生命周期方法中得到的是最新的实例。而函数式组件的事件处理程序就是渲染结果的一部分，事件处理程序属于一个拥有特定的props和state的渲染。

也就是说函数式组件保持了事件处理程序与那一次渲染props的state之间的联系，本身就是正确的。

来修复类组件中的这个问题：

可以在点击的时候就读取并记录当下的state或props，三秒后读取记录的数据（而不是读this.props.xx）再弹出。

方案可行但是扩展极差，在其他多个变量也这样做的时候逐层记录或传递非常繁复。

闭包。

闭包维持了一个可能随时间变化的变量，而此处我们要维持的是React的props或state，React设计中这都是不可变的。让闭包来维持不变的state和props，此时再去捕获这些值，就是一致的。

在render函数中使用闭包：

class ProfilePage extends React.Component { render() { // Capture the props! const props = this.props; // Note: we are *inside render*. // These aren't class methods. const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return <button onClick={handleClick}>Follow</button>; } }

渲染的时候这些需要使用的props已经被捕获（就像上面方案1的记录，在render的时候就已经读取记录下了）。此时表现弹出内容就会是点击时候的那个userA了。

class组件的这个问题是修复了，但是在render函数中添加那么多的函数，且并没有挂载到class上，有点奇怪？

其实去掉class，这就是函数式组件的形式了：

function ProfilePage(props) { const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( <button onClick={handleClick}>Follow</button> ); }

React将他们作为参数传递，props在渲染时被捕获了。不同于class组件的this，这里的props不会被改变。

点击事件处理函数，该函数属于具有正确user值的一次渲染，事件处理函数和其他回调函数也能读到这个值。

回头看这个结论，是不是更好理解一点了:

函数式组件捕获了渲染所使用的值

函数式组件使用最新的props和state

函数式组件捕获了特定渲染的props和state。但是我们如果又想和class组件一样读取最新的props和state呢？

useRef

Dan 老师：在函数式组件中，你也可以拥有一个在所有的组件渲染帧中共享的可变变量。它被成为“ref”

this.something就像是something.current的一个镜像。他们代表了同样的概念。

每一次的渲染结果可以视为一个渲染帧，共享的变量设置为ref，包含DOMRef和class中的实例变量的功能，可以说是非常强大了。