class Welcome extends React.Component {
  
  
  
  
  constructor(props) {
  
  
  
  
    super(props)
  
  
  
  
  }
  
  
  
  
  render() {
  
  
  
  
    return 
Hello, {this.props.name}
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
function Welcome(props) {
  
  
  
  
  return 
Hello, {props.name}
;
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
function Welcome(props) {
  
  
  
  
  return 
Hello, {props.name}
;
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
cass Welcome extends React.Component {
  
  
  
  
  constructor(props) {
  
  
  
  
    super(props)
  
  
  
  
  }
  
  
  
  
  render() {
  
  
  
  
    return 
Hello, {this.props.name}
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
const FunctionalComponent = () => {
  
  
  
  
    const [count, setCount] = React.useState(0);
  
  
  
  

  
  
  
  
    return (
  
  
  
  
        

  
  
  
  
            
count: {count}
  
  
  
  
             setCount(count + 1)}>Click
  
  
  
  
        

在使用hooks情況下，一般如果函數(shù)組件調(diào)用state，則需要創(chuàng)建一個類組件或者state提升到你的父組件中，然后通過props對象傳遞到子組件

生命周期

在函數(shù)組件中，并不存在生命周期，這是因為這些生命周期鉤子都來自于繼承的React.Component

所以，如果用到生命周期，就只能使用類組件

但是函數(shù)組件使用useEffect也能夠完成替代生命周期的作用，這里給出一個簡單的例子：

 
 
 
 

  
  
  
  
const FunctionalComponent = () => {
  
  
  
  
    useEffect(() => {
  
  
  
  
        console.log("Hello");
  
  
  
  
    }, []);
  
  
  
  
    return 
Hello, World
;
  
  
  
  
};
 
 
 
 

上述簡單的例子對應(yīng)類組件中的componentDidMount生命周期

如果在useEffect回調(diào)函數(shù)中return一個函數(shù)，則return函數(shù)會在組件卸載的時候執(zhí)行，正如componentWillUnmount

 
 
 
 

  
  
  
  
const FunctionalComponent = () => {
  
  
  
  
 React.useEffect(() => {
  
  
  
  
   return () => {
  
  
  
  
     console.log("Bye");
  
  
  
  
   };
  
  
  
  
 }, []);
  
  
  
  
 return 
Bye, World
;
  
  
  
  
};
 
 
 
 

調(diào)用方式

如果是一個函數(shù)組件，調(diào)用則是執(zhí)行函數(shù)即可：

 
 
 
 

  
  
  
  
// 你的代碼 
  
  
  
  
function SayHi() { 
  
  
  
  
    return 
Hello, React
 
  
  
  
  
} 
  
  
  
  
// React內(nèi)部 
  
  
  
  
const result = SayHi(props) // ? 
Hello, React
 
 
 
 

如果是一個類組件，則需要將組件進行實例化，然后調(diào)用實例對象的render方法：

 
 
 
 

  
  
  
  
// 你的代碼 
  
  
  
  
class SayHi extends React.Component { 
  
  
  
  
    render() { 
  
  
  
  
        return 
Hello, React
 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
// React內(nèi)部 
  
  
  
  
const instance = new SayHi(props) // ? SayHi {} 
  
  
  
  
const result = instance.render() // ? 
Hello, React
 
 
 
 

獲取渲染的值

首先給出一個示例

函數(shù)組件對應(yīng)如下：

 
 
 
 

  
  
  
  
function ProfilePage(props) {
  
  
  
  
  const showMessage = () => {
  
  
  
  
    alert('Followed ' + props.user);
  
  
  
  
  }
  
  
  
  

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

  
  
  
  
  return (
  
  
  
  
    Follow
  
  
  
  
  )
  
  
  
  
}
 
 
 
 

類組件對應(yīng)如下：

 
 
 
 

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

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

  
  
  
  
  render() {
  
  
  
  
    return Follow
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

兩者看起來實現(xiàn)功能是一致的，但是在類組件中，輸出this.props.user，Props在 React中是不可變的所以它永遠不會改變，但是 this 總是可變的，以便您可以在 render 和生命周期函數(shù)中讀取新版本

因此，如果我們的組件在請求運行時更新。this.props 將會改變。showMessage方法從“最新”的 props 中讀取 user

而函數(shù)組件，本身就不存在this，props并不發(fā)生改變，因此同樣是點擊，alert的內(nèi)容仍舊是之前的內(nèi)容

小結(jié)

兩種組件都有各自的優(yōu)缺點

函數(shù)組件語法更短、更簡單，這使得它更容易開發(fā)、理解和測試

而類組件也會因大量使用 this而讓人感到困惑