何時應該將一個反應組件聲明爲一個函數，而不是一個類？

我不確定何時將響應組件聲明爲簡單的獨立函數，而不是常規的class myComponent extends Component語法。使用來自陣營的文檔的例子（位於here）：何時應該將一個反應組件聲明爲一個函數，而不是一個類？

被稱爲一個「組件」

function BoilingVerdict(props) { 
    if (props.celsius >= 100) { 
    return <p>The water would boil.</p>; 
    } 
    return <p>The water would not boil.</p>; 
}

以下雖然這似乎僅僅是一個函數，而且被聲明像任何普通的舊功能。然後，在接下來的一段，以下也被定義爲一個組成部分，看起來更像方式，我認爲一個組件應該看看：

class Calculator extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    this.state = {temperature: ''}; 
    } 

    handleChange(e) { 
    this.setState({temperature: e.target.value}); 
    } 

    render() { 
    const temperature = this.state.temperature; 
    return (
     <fieldset> 
     <legend>Enter temperature in Celsius:</legend> 
     <input 
      value={temperature} 
      onChange={this.handleChange} /> 
     <BoilingVerdict 
      celsius={parseFloat(temperature)} /> 
     </fieldset> 
    ); 
    } 
}

是什麼這兩個「組件」之間的區別？如果第一個示例沒有從Component類繼承並且沒有使用React.createClass創建，那麼它實際上是一個組件？我希望有人解釋這種區別，因爲我無法在文檔的任何地方找到答案。

來源

2017-06-13 yoursweater

的區別似乎很清楚;一個有狀態，一個沒有。 React文檔聲明，功能（「功能」）組件既沒有狀態也沒有生命週期事件（至少包括用戶代碼）。 –

如果您不需要使用lifecycle methods並且組件不是有狀態的，則可以將組件聲明爲函數。只有組件類型爲Component時，纔可以使用組件生命週期方法，如componentWillMount()和componentDidMount()。

來源

2017-06-13 19:20:30

Calculator必須指定爲基於類的組件，因爲它依賴於內部組件狀態，即this.setState({...})。功能組件也稱爲無狀態組件do not have a backing instance，因此它們無法以相同的方式維護本地狀態。

就我個人而言，我總是嘗試編寫功能組件，因爲它們可以更容易地測試，因爲它們消耗道具的本質並返回一棵樹的實例。我只會轉換組件是基於類的，如果它會：

需要管理自己的基於演示狀態，即不適用於整個應用程序的生命週期方法爲手段
效益的狀態通過提高性能受限的重新渲染
需要對孩子ReactElement的DOM節點通過引用或refs

來源

2017-06-13 19:24:45

有來自Facebook的兩個互補文檔解釋這個相當不錯：

https://facebook.github.io/react/docs/components-and-props.html https://facebook.github.io/react/docs/state-and-lifecycle.html

TL; DR一個「組件」是用於表示某些DOM負有主要責任。根據應用程序的組織方式，組件可能需要也可能不需要維護自己的狀態，或者可以訪問生命週期方法，如componentDidMount或render。在您確實需要這些功能的情況下，您的組件應該是從React.Component繼承的類。否則，你可能會忘記將你的組件寫成一個普通的舊函數。

來源

2017-06-13 19:37:17 djfdev

如果功能方式更受歡迎而不是創建類，則可以使用名爲recompose的高階組件實用程序，它具有lifecycle HOC。

小例子：

const NewComponent = lifecycle({ 
     componentWillMount() { 
     this.props.onEnterScreen(); 
     }, 
})(Component)

來源

2017-06-13 19:44:12

注意到重構文檔陳述這更多的是「逃生孵化」;國際海事組織如果你有一個組件，將有生命週期方法，你應該只是做一個正常的組件，而不是訴諸於HOC。 –

何時應該將一個反應組件聲明爲一個函數，而不是一個類？

回答

相關問題