Question

我是 React 的初学者，学习了过去 3 个月，但是，实现组件的方式已分为 2 种功能和类。截至 2021 年，在学习、功能风格或类风格组件方面的进步路径是什么。

从长远来看，未来 5 年将如何调整开发方法
根据样式，我可以专注于该特定组件样式的设计模式和架构样式。

Answer 1

从长远来看，您应该关注功能组件，因为 React 团队建议使用带有 hooks 的功能组件来管理组件的状态。

但这并不意味着您应该完全忽略类组件。原因是在职业生涯中，您可能会想出在使用类组件引入钩子之前编写的代码库，并且在这种情况下，您不允许将其重构为功能组件（可能有各种原因不这样做）您对类组件的了解将派上用场。

Answer 2

我不想提其他人，我想分享一下我的经验，生病了要调用操作或API调用时使用类组件，而要更改状态和灵活更改数据时使用功能组件！

看看这个例子，你会发现哪个更好：

注意：还要检查何时在输入中传递相同的值

类组件：

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 之前，您可以使用功能组件做什么有一定的限制，并且您必须使用类组件来制作 React 应用程序。但是由于现在引入了钩子，您可以对功能组件中的类做任何您能做的事情。

Hooks 绝对是现在要走的路。它甚至在 React 文档中也提到过：

<块引用>

从长远来看，我们预计 Hook 将成为人们编写 React 组件的主要方式。

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

Answer 4

在它们之间几乎没有选择，但您会发现现在有很多教程和指南都是为功能组件编写的，对于刚开始的人来说，您可能希望坚持使用可以轻松找到相关信息的内容为了。此外，即使是 React 团队也更加关注函数式组件，我坚信类组件将在未来几年内悄然逐步淘汰，因此可能会使用函数式组件。

React 功能组件与类组件

4 个答案: