React 功能組件與 class 組件

Question

我是最近 3 個月學習 React 的初學者，但是，實現組件的方式分為兩種功能和 class。 截至 2021 年，學習、功能樣式或 class 樣式組件的前進路徑。

• 從長遠來看，未來 5 年將如何調整開發方法
• 基於風格，我可以專注於特定組件風格的設計模式和架構風格。

Answer 1

從長遠來看，您應該關注功能組件，因為 React 團隊建議使用帶有鈎子的功能組件來管理組件的 state。

但這並不意味着您應該完全忽略 class 組件。 原因是在職業生涯中，您可能會想出在引入使用 class 組件的鈎子之前編寫的代碼庫，並且在這種情況下，您不允許將其重構為功能組件（可能有各種原因不這樣做）您對 class 組件的了解將派上用場。

Answer 2

我不想提及其他人，我想分享我的經驗，生病了當我想調用一個動作或 API 調用時使用 class 組件，當我想要 state 時使用更改和靈活的數據更改組件

看看這個例子，你會發現哪個更好：

注意：還要檢查您何時在輸入中傳遞相同的值

Class 組件：

 let AppRender = 0; class App extends React.Component { state = { hello: "" } setHello = (value) => this.setState({hello:value}) render() { return( <div> <h2>Hello {this.state.hello}</h2> <p>AppRender: {++AppRender}</p> <Child setHello={this.setHello}/> </div> ) } } let ChildRender = 0; class Child extends React.Component { state = { input: "World" } buttonHandler = () => { this.props.setHello(this.state.input) } inputHandler = (e) => { this.setState({input:e.target.value}) } componentDidMount() { this.props.setHello(this.state.input) }; render() { return ( <div> <p>ChildRender: {++ChildRender}</p> <input type="text" value={this.state.input} onChange={this.inputHandler}></input> <button onClick={this.buttonHandler}>Say Hello</button> </div> ) } } ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

功能組件：

 let AppRender = 0; const App = () => { const [hello, setHello] = React.useState("") return( <div> <h2>Hello {hello}</h2> <p>AppRender: {++AppRender}</p> <Child setHello={setHello}/> </div> ) } let ChildRender = 0; const Child = ({setHello}) => { const [input, setInput] = React.useState("World") const buttonHandler = () => { setHello(input) } const inputHandler = (e) => { setInput(e.target.value) } React.useEffect(() => { setHello(input) }, []); return( <div> <p>ChildRender: {++ChildRender}</p> <input type="text" value={input} onChange={inputHandler}></input> <button onClick={buttonHandler}>Say Hello</button> </div> ) } ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 3

我認為您要問的問題是鈎子與類，因為自 React 開始以來就存在功能組件。 在 hooks 之前，你可以使用功能組件做一些限制，你必須使用 class 組件來制作 React 應用程序。 但是由於現在引入了鈎子，您可以對功能組件中的類做所有可以做的事情。

Hooks 絕對是現在通往 go 的方式。 它甚至在 React 文檔本身中提到：

從長遠來看，我們希望 Hooks 成為人們編寫 React 組件的主要方式。

https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

Answer 4

它們之間幾乎沒有可供選擇的地方，但您會發現現在有很多教程和指南都是針對功能組件編寫的，對於剛入門的人來說，您可能希望堅持使用可以輕松找到相關信息的內容。 此外，即使是 React 團隊也更多地關注功能組件，我堅信 class 組件將在未來幾年內悄然淘汰，所以 go 可能會帶有功能組件。