javascript - 了解reactjs中的状态？

Question

我正在学习Reactjs。我正在构建计数器应用程序。我认为下面的代码和 react 中的状态是相同的。 console.log 正确打印，但在 html 中它不会更改值。你能向我解释一下为什么代码不起作用吗？

import React, {useState} from "react";

let count = 0;
const Counter = (props) => {
    const setCount = ()=> {
        count = count + 1;
    };
    return (
        <div>
            <button onClick={()=> {
                setCount();
                console.log('counter: ', count);
            }}>button</button>
            <div>Hello {props.name} and your current number is: {count} </div>
        </div>
    )
};

export default Counter;

Answer 1

更改变量不会重新呈现组件。

要查看 dom 中的更新，您必须重新渲染组件。有几种方法可以做到这一点。

• 改变状态
• 更改 Prop
• 改变上下文

如果您将计数变量置于某种状态并从那里触发它，您将看到它在组件中更新

文档示例

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}