新手学习 React,最近刚发现如果有变量发生改变,不使用 useState 提供的 setXXX 也是可以的.

用 React 官方教程中的代码举例:

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);
  const [otherNumber, setOtherNumber] = useState(0);
  console.log("重新渲染")
  return (
    <>
      <h1>{number}</h1>
      <h1>{otherNumber}</h1>
      <button onClick={() => {
        setNumber(1);
        setOtherNumber(2);
      }}>+</button>
    </>
  )
}

效果是点击按钮,修改 number 和 otherNumber 的值,模拟实际使用中请求接口后需要修改多处变量显示的场景.

据我浅薄的理解,useState 此处应该是修改变量,并通知页面使用修改后的值重新渲染吧?打印的 log 确实也走了两遍.

所以可不可以这样:只对其中一个变量使用 useState(反正会重走 return 方法),剩下的变量就在 return 前面计算就行了:

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);
  let otherNumber  = number == 1 ? 2:1;
  return (
    <>
      <h1>{number}</h1>
      <h2>{otherNumber}</h2>
      <button onClick={() => {
        setNumber(1);
      }}>+</button>
    </>
  )
}

这里的 let otherNumber = number == 1 ? 2:1;只是很简单的逻辑,实际使用中可能包含复杂的数据处理工作.

从运行效果来看,似乎也没啥问题......

这样岂不是可以把最外层的数据 rootData 做个 useState 就行了,里面各个组件从这个 rootData 里面拿.就是不知道对性能有没有影响了.

目前看的教程是 https://zh-hans.react.dev/learn,对 React 理解还不深,求大佬解惑,谢谢~