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中的实例变量的功能，可以说是非常强大了。
需要最新的props和state值，可以使用useRef创建的变量来记录，通过useEffect可以在值变化的时候自动追踪。
function MessageThread() {
const [message, setMessage] = useState('');
// 保持追踪最新的值。
const latestMessage = useRef('');
useEffect(() => {
latestMessage.current = message;
});
const showMessage = () => {
alert('You said: ' + latestMessage.current);
};
React函数总是捕获他们的值。