【React 技术】开发过程中遇到 State 和生命周期方法在类里面的运用

作者：黎燃

2022-11-29
内蒙古
本文字数：1984 字
阅读完需：约 7 分钟

State

创建一个同名的 ES6 类，并从 React.Component 继承。添加空渲染（）方法。将函数体移动到 render（）方法中。在 render（）方法中使用此选项 Props 替换 Props。删除剩余的空函数声明。通过调用 ReactDOM Render（）来修改我们要渲染的元素：

function tick() {  const element = (    <div>      <h1>Hello, world!</h1>      <h2>It is {new Date().toLocaleTimeString()}.</h2>    </div>  );  ReactDOM.render(    element,    document.getElementById('root')  );}
setInterval(tick, 1000);

复制代码

现在，Clock 组件被定义为类，而不是函数。每次更新组件时都会调用渲染方法，但只要＜Clock/＞在同一个 DOM 节点中渲染，就会只创建和使用 Clock 组件的一个类实例。这允许我们使用许多其他功能，如状态或生命周期方法。

class Clock extends React.Component {  render() {    return (      <div>        <h1>Hello, world!</h1>        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>      </div>    );  }}

复制代码

放这个。props 用这个替换日期。状态日期：

class Clock extends React.Component {  render() {    return (      <div>        <h1>Hello, world!</h1>        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>    );  }}

复制代码

Class 组件应该始终使用 props 参数来调用父类的构造函数。

ReactDOM.render(  <Clock />,  document.getElementById('root'));

复制代码

将生命周期方法添加到类

在具有许多组件的应用程序中，在组件被破坏时释放所占用的资源是非常重要的。当 Clock 组件首次呈现到 DOM 中时，为其设置计时器。这在 React 中称为“装载”。同时，当删除 DOM 中的 Clock 组件时，应该清除计时器。这在 React 中称为“卸载”。我们可以为类组件声明一些特殊方法，这些方法将在安装或卸载组件时执行：

class Clock extends React.Component {  constructor(props) {    super(props);    this.state = {date: new Date()};  }
  componentDidMount() {  }
  componentWillUnmount() {  }
  render() {    return (      <div>        <h1>Hello, world!</h1>        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>    );  }}

复制代码

让我们快速总结一下发生了什么以及这些方法的调用顺序：当＜Clock/＞传递给 ReactDOM 时，React 将调用 Clock 组件的构造函数。因为 Clock 需要显示当前时间，所以它将使用包含当前时间的对象来初始化此状态我们稍后将更新状态。然后 React 调用组件的 render（）方法。这就是 React 如何确定页面上应该显示的内容。然后 React 更新 DOM 以匹配 Clock 渲染的输出。

// Wrongthis.state.comment = 'Hello';

复制代码

当 Clock 的输出插入 DOM 时，React 将调用 ComponentDidMount（）生命周期方法。在该方法中，Clock 组件请求浏览器设置一个计时器，以每秒调用组件的 tick（）方法一次。

// Correctthis.setState({comment: 'Hello'});

复制代码

浏览器每秒调用一次 tick（）方法。在此方法中，Clock 组件将通过调用 setState（）来计划 UI 更新。由于调用了 setState（），React 可以知道状态已经改变，然后再次调用 render（）方法来确定页面上应该显示什么。这一次，这一次。state 日期不同，因此将呈现输出的更新时间。React 还将相应地更新 DOM。

// Wrongthis.setState({  counter: this.state.counter + this.props.increment,});

复制代码

从 DOM 中删除 Clock 组件后，React 将调用 componentWillUnmount（）生命周期方法，计时器将停止。

// Correctthis.setState(function(state, props) {  return {    counter: state.counter + props.increment  };});

复制代码

为了解决这个问题，让 setState（）接收函数而不是对象。此函数使用最后一个状态作为第一个参数，当应用此更新时使用 props 作为第二个参数：

this.setState((state, props) => ({  counter: state.counter + props.increment}));

复制代码

父组件和子组件都不能知道组件是有状态的还是无状态的，它们不关心它是函数组件还是类组件。这就是为什么状态被称为局部状态或封装状态。除了拥有和设置它的组件之外，没有其他组件可以访问它。组件可以选择将其状态作为道具传递给其子组件：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

复制代码

这通常被称为“自上而下”或“单向”数据流。任何状态始终属于特定组件，从该状态派生的任何数据或 UI 只能影响树中“低于”它们的组件。如果你把一棵由组件组成的树想象成一个由道具组成的数据瀑布，那么每个组件的状态就像在任何时候向瀑布添加额外的水，但它只能向下流动。为了证明每个组件都是真正独立的，我们可以创建一个呈现三个时钟的 App 组件：

unction App() {  return (    <div>      <Clock />      <Clock />      <Clock />    </div>  );}
ReactDOM.render(  <App />,  document.getElementById('root'));

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/fabac25c075d9cd862db766ed】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

【React 技术】开发过程中遇到 State 和生命周期方法在类里面的运用

State

将生命周期方法添加到类

黎燃

评论