在函数组件中创建状态

代码示例

1|--x---x---x-x--x--x------> 用户事件
2|--a---a---a-a--a--a------> 操作处理函数

统计点击次数并更新显示

1function Title() {
2  // 局部变量 'count' 初始化为 0
3  let count = 0;
4
5  // 事件处理函数：每次点击时将 'count' 变量加 1
6  const onClick = () => {
7    count = count + 1;
8  };
9
10  // JSX 结构：一个按钮和一个显示计数的 h1 元素
11  return (
12    <>
13      <button onClick={onClick}>+</button>
14      <h1>Hello World+{count}</h1>
15    </>
16  );
17}

通过点击处理函数监控 React 组件中的状态变化

1function Title() {
2  // 局部变量 'count' 初始化为 0
3  let count = 0;
4
5  // 事件处理函数：记录点击信息及当前 'count' 的值
6  const onClick = () => {
7    console.log('clicked', count); ➀
8    count = count + 1;
9  }
10
11  // 记录 'count' 更新后的值
12  console.log('updated', count); ➁
13
14  return ();
15}

1|----0--1-2--3-4----5------> clicked ➀
20--------------------------> updated ➁

代码示例

1ReactDOM.render(<Title />, rootEl)

更新状态并重新渲染 React 组件

1const onClick = () => {
2  // 记录点击信息及当前 'count' 的值
3  console.log('clicked', count); ➀
4
5  // 直接修改 'count'（未使用 React 状态）
6  count = count + 1;
7  ReactDOM.render(<Title />, rootEl);
8}

1|----0--0-0--0-0----0------> clicked ➀
20----0--0-0--0-0----0------> updated ➁

监控 React 组件中的状态变化

1const Title = () => {
2  let count = 0
3  // 省略 onClick 语句
4  console.log('updated', count) ➁
5  // 省略 return 语句
6}