本文共 1053 字，大约阅读时间需要 3 分钟。

在线测试

相同之处

• props不能改变
• 父组件props有变化时，子组件随之而改变

区别

其他区别

1.类组件demo

import React from 'react';class ProfilePage extends React.Component {
     showMessage = () => {
       alert('Followed ' + this.props.user);  };  handleClick = () => {
       setTimeout(this.showMessage, 3000);  };  render() {
       return Follow;  }}export default ProfilePage;

• 当我改变props时，我发现改变了props的值（Dan->Sophie），类组件也改变了值，永远保持一致
  
• 原因分析
  类组件捕获最新的值（永远保持一致）当实例的props属性发生修改时，class组件直接使用this（组件的实例），所以可以直接获取组件最新的props

2.函数式组件demo

import React from 'react';function ProfilePage(props) {
     const showMessage = () => {
       alert('Followed ' + props.user);  };  const handleClick = () => {
       setTimeout(showMessage, 3000);  };  return (    Follow  );}export default ProfilePage;

• 当我改变props时（Dan->Sophie），你会发现函数组件会渲染之前的值Dan这个名字
  
• 原因分析：函数式组件捕获了渲染所使用的值。在函数组件中，之前的props参数，已经因为javascript闭包的特性，保存在内存之中，无法从外部进行修改。所以在定时器执行callback时，打印的还是旧值。

参考链接：

3.如何在react组件中打印出最新的值？用useRef

具体如何使用查看我的另一篇文章

转载地址：http://tfqii.baihongyu.com/