时间戳

首页 > 解决方案 > useState() Hook 在 reacts.js 中是如何工作的？

javascript - useState() Hook 在 reacts.js 中是如何工作的？

问题描述

我是 react.js 的新手，下面是我的代码

import React,{useState} from 'react';
import './App.css';
import Person from './Person/Person'

const App = props =>
{
  const [personState, setPersonState] = useState({
    persons : [
      {name:"Max", age:28},
      {name:"Manu", age:29},
      {name:"Ranjeet", age:25}
    ],
    otherState : 'Some state value'
  }
  );
  console.log(personState);
  const switchNameHandler = () =>{
    setPersonState({
      persons : [
        {name:"Maximillian", age:28},
        {name:"Manu", age:29},
        {name:"Ranjeet", age:24}
      ],
      otherState : personState.otherState
    });

  }
// function App() {

      return (
        <div className="App">
          <h1>React App</h1>
          <p>This is working</p>
          <button onClick={switchNameHandler}>Switch Name</button>
          <Person name={personState.persons[0].name} age={personState.persons[0].age}/>
          <Person name={personState.persons[1].name} age={personState.persons[1].age}>My Hobbies:Racing</Person>
          <Person name={personState.persons[2].name} age={personState.persons[2].age}/>

        </div>
      );


}

export default App;

这里我在switchNameHandler函数中没有console.log（personState），但它显示在控制台中，当调用switchNameHandler时，是因为useState（）钩子还是其他原因

{persons: Array(3), otherState: "Some state value"}
otherState: "Some state value"
persons: Array(3)
0: {name: "Maximillian", age: 28}
1: {name: "Manu", age: 29}
2: {name: "Ranjeet", age: 24}
length: 3
__proto__: Array(0)
__proto__: Object

标签： javascriptreactjs

解决方案

是的，这是因为 useState。

在此代码中，每次呈现 App 组件时都会调用 console.log。

当整个应用程序被渲染时，或者你的应用程序组件状态发生变化时，这至少会发生一次。在您的示例中， useState 创建了一些状态，并且您的单击处理程序更改了该状态，因此重新呈现了 App 组件。

推荐阅读