时间戳

首页 > 解决方案 > React Hooks 之后的 render() 发生了什么？

reactjs - React Hooks 之后的 render() 发生了什么？

问题描述

在 Hooks 之前，我们使用了很多基于类的方法render()，它确实如前所述，将之前的 DOM 与当前的 DOM 进行比较，如果它们不同，React 将重新渲染组件。

但是现在，使用 React Hooks，通常我们只使用return()返回和渲染，我是对的吗？

和Hooks 之前return()做的一样吗？render()如果不是，有什么区别？

标签： reactjsreact-hooks

解决方案

return()并且render()完全一样。如果将组件编写为函数，则使用return().

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

如果将组件编写为类，则使用render().

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

但是，在过去，您在功能组件中没有状态/生命周期方法。为了解决这个问题，React 引入了 Hooks。过去你必须在构造函数中定义状态，现在你在这样的函数中定义它：

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}

此外，您可以使用本文中提到的带有钩子的生命周期方法

推荐阅读