React 功能组件与 class 组件

Question

I am a beginner in React learning it for the last 3 months, However, the way to implement components has split into 2 kinds functional and class. As of 2021 which path to advance in learning, functional Style or class style components.

• How will the development approach will be adapted in the long run maybe next 5 years
• Based on the style I can focus on design pattern and architecture style for that particular component style.

Answer 1

For the long run, you should focus on functional components, as react team has suggested to use functional components with hooks to manage the state for component.

But that does not mean you should completely ignore class components. The reason is in professional life you may come up with the code base that was written before the introduction of hooks using class components and you are not allowed to refactor it to functional components ( there can be various reasons of not doing that) in that case your knowledge about class components will come in handy.

Answer 2

I don't want to mention other people, I want to share my experience, ill Use the class component when I want call an action or API call, and when I want state change and flexible data change use the functional component!

Look at this example and you will find which one is better:

Note : Also Check when you pass the same value inside the input

Class component:

 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>

Functional component:

 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

I think the question you are asking is hooks vs classes, because functional components have existed since the beginning of React. Before hooks, there were certain limitations to what you can do with functional components and you had to use class components to make a React application. But since hooks were introduced now you can do everything you could with classes in a functional component.

Hooks is definitely the way to go right now. Its even mentioned in the React documentation itself:

In the longer term, we expect Hooks to be the primary way people write React components.

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

Answer 4

There's really little to choose between them but you'll find that a lot of tutorials and guides are now written for functional components and, for someone who's just starting out, you might want to stick with what you can easily find relevant information for. Also, even the React team are focusing more on functional components and I strongly believe class components would be quietly phased out over the next couple years so maybe go with functional components.