组件交互中的 State

State Machines

React 将组件视为状态机（State Machines），通过与用户的交互，实现不同状态，然后渲染用户界面（UI），以保持用户界面和数据一致。

我们只需要更新组件的状态（state），然后根据新的状态重新渲染用户界面（不要直接操作 DOM）。

State 状态

案例: 1. 初始化计时器为当前时间

以下是一个创建名为 Clock 的扩展了 React.Component 的 ES6 类的实例，它在 render() 方法中使用 this.state 来显示当前时间：

javascript

// 案例: 1. 初始化计时器为当前时间
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>;
  }
}
ReactDOM.render(<Clock />, document.getElementById("app1"));

接下来，我们将使 Clock 组件设置自己的计时器并每秒更新一次。我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码。例如，每当 Clock 组件第一次加载到 DOM 中的时候，我们都希望生成一个定时器，这被称为挂载。同样，每当由 Clock 生成的 DOM 被移除的时候，我们也希望清除定时器，这被称为卸载。

案例: 2. 设置计时器并每秒更新一次

javascript

// 案例: 2. 设置计时器并每秒更新一次
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.timerID = null;
    this.state = { date: new Date() };
  }
  tick() {
    this.setState({ date: new Date() });
  }
  componentDidMount() {
    // 这里的回调不能用 "function () { this.tick() }", 只能用 "() => this.tick()" 或者 "this.tick.bind(this)"
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  render() {
    return <h2>现在是 {this.state.date.toLocaleTimeString()}. -- class</h2>;
  }
}
ReactDOM.render(<Clock />, document.getElementById("app2"));

在以上代码中，componentDidMount() 和 componentWillUnmount() 方法被称为生命周期钩子。在组件输出到 DOM 后会执行 componentDidMount() 钩子，在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。而当 Clock 组件被从 DOM 中移除时，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。

数据在 React 中是从上至下流动的，也就是说，父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。这就是为什么状态通常被称为局部或封装。除了拥有并设置它的组件外，其它组件不可访问。

案例: 3. 封装 FormattedDate 组件

例如，以下实例中的 FormattedDate 组件将在其属性中接收到 date 值，它并不知道这个值是来自 Clock 状态、还是来自 Clock 的属性、或者是手工输入的：

javascript

// 案例: 3. 封装 FormattedDate 组件
const FormattedDate = (props) => {
  return (
    <h2>现在是 {props.date.toLocaleTimeString()}. -- class-FormattedDate</h2>
  );
};
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.timerID = null;
    this.state = { date: new Date() };
  }
  tick() {
    this.setState({ date: new Date() });
  }
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  render() {
    return <FormattedDate date={this.state.date} />;
  }
}
ReactDOM.render(<Clock />, document.getElementById("app3"));

这通常被称为自顶向下或单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

案例: 4. useState() 实现定时器

案例 4 (代码中涉及到生命周期以及 Hook, 参考后期章节)中使用 useState() 实现定时器，useState() 方法接收一个参数，即 state 初始值，返回值为一个数组，包含两个元素：

数组中的第一个元素为 state 值，
数组中的第二个元素为更新 state 值的函数。

// 案例: 4. useState() 实现定时器
const useState = React.useState;
const FormattedDate = (props) => {
  return <h2>现在是 {props.date.toLocaleTimeString()}. -- useState</h2>;
};
const Clock = () => {
  const [date, setDate] = useState(new Date());
  let timerId = null;
  //
  React.useEffect(() => {
    // 回调函数的作用同 componentDidMount
    timerId = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timerId); // return 作用同 componentWillUnmount
  }, [date]); // 第二参数作用是监听 state, 传空数组不监听数据
  return <FormattedDate date={date} />;
};
ReactDOM.render(<Clock />, document.getElementById("app4"));

useEffect

useEffect 是 React 中的一个 Hook，它允许你在函数组件中执行副作用操作（side effects）。

基本语法如下：

参数 1（回调函数）:
- React: 对应于 componentDidMount（当依赖项数组为空时）或 componentDidUpdate（当依赖项数组包含变量时）。
- Vue: 对应于 mounted（在 Vue 3 中，使用 onMounted）钩子函数。
参数 2（依赖项数组）:
- React: 控制副作用函数的执行时机，类似于 React 组件的 shouldComponentUpdate 方法。
- Vue: 类似 watch 或者 computed 属性来监听数据变化并作出响应。
参数 1 里的 return（清除函数）:
- React: 对应于 componentWillUnmount，用于在组件卸载前执行一些清理工作。
- Vue: 对应于 beforeUnmount（在 Vue 3 中，使用 onBeforeUnmount）钩子函数。

代码与演示

1. 全部代码

点击查看代码

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. 初始化计时器为当前时间
        class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.state = { date: new Date() };
          }
          render() {
            return <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>;
          }
        }
        ReactDOM.render(<Clock />, document.getElementById("app1"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. 设置计时器并每秒更新一次
        class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.timerID = null;
            this.state = { date: new Date() };
          }
          tick() {
            this.setState({ date: new Date() });
          }
          componentDidMount() {
            // 这里的回调不能用 "function () { this.tick() }", 只能用 "() => this.tick()" 或者 "this.tick.bind(this)"
            this.timerID = setInterval(() => this.tick(), 1000);
          }
          componentWillUnmount() {
            clearInterval(this.timerID);
          }
          render() {
            return (
              <h2>现在是 {this.state.date.toLocaleTimeString()}. -- class</h2>
            );
          }
        }
        ReactDOM.render(<Clock />, document.getElementById("app2"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. 封装 FormattedDate 组件
        const FormattedDate = (props) => {
          return (
            <h2>
              现在是 {props.date.toLocaleTimeString()}. -- class-FormattedDate
            </h2>
          );
        };
        class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.timerID = null;
            this.state = { date: new Date() };
          }
          tick() {
            this.setState({ date: new Date() });
          }
          componentDidMount() {
            this.timerID = setInterval(() => this.tick(), 1000);
          }
          componentWillUnmount() {
            clearInterval(this.timerID);
          }
          render() {
            return <FormattedDate date={this.state.date} />;
          }
        }
        ReactDOM.render(<Clock />, document.getElementById("app3"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 4. useState() 实现定时器
        const useState = React.useState;
        const FormattedDate = (props) => {
          return <h2>现在是 {props.date.toLocaleTimeString()}. -- useState</h2>;
        };
        const Clock = () => {
          const [date, setDate] = useState(new Date());
          let timerId = null;
          //
          React.useEffect(() => {
            // 回调函数的作用同 componentDidMount
            timerId = setInterval(() => setDate(new Date()), 1000);
            return () => clearInterval(timerId); // return 作用同 componentWillUnmount
          }, [date]); // 第二参数作用同 componentDidUpdate, 传空数组不监听数据
          return <FormattedDate date={date} />;
        };
        ReactDOM.render(<Clock />, document.getElementById("app4"));
      })();
    </script>
  </body>
</html>

2. 案例演示

test-react-state.html 资源加载中...

组件交互中的 State ​

State 状态 ​

案例: 1. 初始化计时器为当前时间 ​

案例: 2. 设置计时器并每秒更新一次 ​

案例: 3. 封装 FormattedDate 组件 ​

案例: 4. useState() 实现定时器 ​

代码与演示 ​

1. 全部代码 ​

2. 案例演示 ​

组件交互中的 State

State 状态

案例: 1. 初始化计时器为当前时间

案例: 2. 设置计时器并每秒更新一次

案例: 3. 封装 FormattedDate 组件

案例: 4. useState() 实现定时器

代码与演示

1. 全部代码

2. 案例演示