React hooks的useState原理

Posted 2023-05-16

参考技术A 因为有多个n

React Hooks --- useState 和 useEffect

　　首先要说的一点是React Hooks 都是函数，使用React Hooks，就是调用函数，只不过不同的Hooks(函数)有不同的功能而已。其次，React Hooks只能在函数组件中使用，函数组件也是函数，函数的作用是什么？就是调用和执行。当React调用函数组件进行渲染时，函数组件里面的每一行代码都会被执行，一个一个的Hooks 就会依次执行。

　　useState() 的调用返回了一个数组，数组的第一项就是组件的状态，第二项则是更新状态的函数，所以在函数组件中就可以声明一个状态变量来保存状态，和一个引用变量来保存更改状态的函数， 至此函数组件拥有了状态，同时也可以更新状态。当然，useState()还要接受一个参数，用来初始化状态变量，这个参数可以是任意类型，基本类型， 对象，函数。你可以使用数组索引的方式来获取到状态变量和更新函数，这样有助于理解

function App() {
    let state = useState(‘‘)[0];
    let setState = useState(‘‘)[1];
}

　　更为简洁的语法则是使用数组解构，同时为状态变量和更新函数起一个有意义的名字

const App= () => {
  const [message, setMessage]= useState( ‘‘ );
}

　　声明变量之后，就可以像其它变量一样在函数组件中使用了，更具体一点，就是在函数返回的jsx 中使用了。写一个input输入框

const App = () => {
  const [message, setMessage]= useState( ‘‘ );

  function handleClick(e) {
      setMessage(e.target.value)
  }

  return (
    <input value={message} onChange={handleClick}></input>
  )
}

　　当组件初次渲染时，先调用useState(), 此时useState() 返回了’‘ ， 因为我们传递它的初始值就是’‘，然后把它赋值给了message, 此时message的值为‘‘, 然后声明了一个函数handleClick,  最后返回一个jsx, 它里面使用了message ，赋值为value, 此时value的值也为’‘，同时绑定了一个change 事件。 渲染完成后，页面中显示了一个input 输入框，值为空。现在输入一个值，触发了onChange 事件，它会调用setMessage,  这时它触发了React 的更新机制。当然React 不会立刻更新这个值，它会放到更新队列，和类组件中的setState 一样，React 的渲染是异步的。当真正重新渲染的时候，React 就会再次调用和渲染App函数组件，还是先调用useState(), 这时useState 返回的不是初始值，而是触发更新的setMessage中的值。因为调用setMessage时，相当于我们向React传递了一个参数，React 在内部完成了状态更新。把useState返回的值，也就是你在输入框中输入的值，赋值给了message. 接着向下执行，还是一个函数的创建，然后是jsx 中，jsx中的message 是你输入的值，然后赋值给value, 渲染完成，页面上input 中有了你输入的值。