Question

React Hooks给了我们useState选项，我总是看到Hooks与Class-State的比较。但是Hooks和一些常规变量呢？

例如

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

我没有使用Hooks，它将为我提供与以下结果相同的结果：

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

那么区别是什么？在这种情况下，使用Hooks会更加复杂...那为什么要开始使用它呢？

Answer 1

原因是如果您<?php if (isset($_POST['submit'])){ // amount of numbers $num = $_POST['num']; // array of different numbers $num_ar = []; // while loop while (count($num_ar) !== $num) { // random number $rand1 = rand(1000000, 9999999); // 14-digits //$rand1 = rand(10000000000000, 99999999999999); // if it is a different number if(!in_array($rand1,$num_ar)) { $sql = mysql_query("INSERT INTO pins(randi) VALUES('$rand1')"; array_push($num_ar,$rand1); } } } ?>重新渲染视图。变量本身仅会更改内存中的位，并且您的应用程序状态可能与视图不同步。

比较以下示例：

useState

在两种情况下，function Foo() { const [a, setA] = useState(0); return <div onClick={() => setA(a + 1)}>{a}</div>; } function Foo() { let a = 0; return <div onClick={() => a + 1}>{a}</div>; }的点击都会改变，但只有当您使用a时，视图才能正确显示useState的当前值。

Answer 2

更新状态将使该组件再次重新呈现，但局部值不会。

在您的情况下，您已在组件中渲染了该值。也就是说，更改值后，应重新渲染组件以显示更新后的值。

因此，使用useState比使用正常的本地值会更好。

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 3

您的第一个示例仅起作用，因为数据基本上从不更改。使用setState的输入点是在状态挂起时重新渲染整个组件。因此，如果您的示例需要某种状态更改或管理，您将很快意识到更改值是必要的，并且要使用变量值更新视图，则需要状态并重新呈现。

Answer 4

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

等同于

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

useState返回的是两件事：

新状态变量
设置该变量

如果您致电setA(1)，则会致电this.setState({ a: 1 })并触发重新渲染。

Answer 5

局部变量将在每次渲染时重置，而状态将更新：

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

React Hooks-使用useState而不是变量

5 个答案: