React函數組件和類組件的相同和區別

在線測試live demo

相同之處

• props不能改變
• 父組件props有變化時，子組件隨之而改變

區別

區別	函數組件	類組件
生命週期	無	有
this	無	有
state	無	有
改變state	React.Hooks : useState	this.setState()
性能	高（不用實例化）	低（需要實例化）

其他區別

1.類組件demo

import React from 'react';

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}
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 (
    <button onClick={handleClick}>Follow</button>
  );
}
export default ProfilePage;

• 當我改變props時（Dan->Sophie），你會發現函數組件會渲染之前的值Dan這個名字
  
• 原因分析：函數式組件捕獲了渲染所使用的值。在函數組件中，之前的props參數，已經因爲javascript閉包的特性，保存在內存之中，無法從外部進行修改。所以在定時器執行callback時，打印的還是舊值。

參考鏈接：How Are Function Components Different from Classes?

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

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