我们将通过React应用程序中常见的bug说明其差异。
import React from 'react'
class MailOrder extends React.Component {
state = {
user: 'Dan',
};
render() {
return (
<div>
<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>
</div>
)
}
}
export default MailOrder;
function ProfilePageFunction(props) {
const showMessage = () => {
alert('Followed ' + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
class ProfilePageClass extends React.Component {
showMessage = () => {
alert('Followed ' + this.props.user);
};
handleClick = () => {
setTimeout(this.showMessage, 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
操作步骤：
使用两个按钮尝试此操作序列：
- 点击 其中一个"follow"按钮
- 在3秒之前 更改 所选的个人资料(笔：就是那个下拉框)。
- 查看 弹出的文字。
你会注意到一个特殊的区别：
- 使用上面的
ProfilePage函数 ，单击Follow Dan的个人资料，然后导航到Sophie's仍然会弹框'Followed Dan'。 - 使用上面的
ProfilePage类 ，他将会弹出'Followed Sophie'：
结果输出：
1331779-f691c773d522a27b.gif
在此示例中，第一个行为是正确的行为。如果我follow一个人然后导航到另一个人的个人资料， 类的实现显然是错误的。
那么如果我们不采用函数的方法编写组件，要怎么样才能达到相同的效果呢？
我们尝试在定时器延迟之前把之前的prop传过去，修改类代码为：
class ProfilePageClass extends React.Component {
showMessage = (user) => {
alert('Followed ' + user);
};
handleClick = () => {
var { user } = this.props
setTimeout(this.showMessage.bind(this,user), 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
这个方法对于这个功能而言是可行的，但是不能解决根本问题，如果showMessage方法里面调用了this.prop或者this.state对象的属性值怎么办？
为了防止某个变量被外部修改，我们通常使用闭包来解决，所以我们尝试当组件结束某个特定渲染中的props或状态，则它们始终保持完全相同，就是在render中定义函数行为，如下：
class ProfilePageClass 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>;
}
}
这样，它内部的任何代码（包括showMessage）都可以保证看到这个特定渲染的props。React不再“移动我们的props”了。然后我们可以在里面添加任意数量的辅助函数，它们都会使用捕获的props和状态。 闭包来救场了!
从上面的例子中我们可以看出，如果在render中定义函数而不是使用类方法，那么拥有一个类有什么意义呢？实际上，我们可以通过删除它周围的类“外壳”来简化代码:
function ProfilePageFunction(props) {
const showMessage = () => {
alert('Followed ' + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
才发现原来遇见了以前的自己，是不是很惊喜。这下应该能明白函数和类的区别了吧！
当然，针对函数的写法，React18+推出了React-hook，可以让我们在函数中管理状态，如下代码：
function ProfilePageFunction(props) {
const [message, setMessage] = useState('');
const showMessage = () => {
alert('You said: ' + message);
};
const handleSendClick = () => {
setTimeout(showMessage, 3000);
};
const handleMessageChange = (e) => {
setMessage(e.target.value);
};
return (
<>
<input value={message} onChange={handleMessageChange} />
<button onClick={handleSendClick}>Send</button>
</>
);
}
本人暂时还没有学完hook，如有需要请查看react-hook的官网：https://reactjs.org/docs/hooks-intro.html
