React Hooks useEffect useState userContext userReducer应用项目

Posted 2023-05-16

参考技术A

介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是 类组件* ，一种是** 纯函数组件* ，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说 组件的最佳写法应该是函数，而不是类。 *。 但是我们知道，在以往开发中 类组件 和 纯函数组件*的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条

这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，至于Redux,更不用多说，很久之前Redux的作者就说过，“能用React解决的问题就不用Redux”,等等一系列的话。关于React类组件redux的作者又有话说

下面我们用类组件做一个简单的计数器

可以看出来，上面的代码确实很重。 为了解决这种， 类组件功能齐全却很重，纯函数很轻便却有上文几点重大限制 ，React团队设计了 React Hooks * React Hooks就是加强版的函数组件，我们可以完全不使用 class ，就能写出一个全功能的组件*

\'Hooks\'的单词意思为“钩子”。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 而React Hooks 就是我们所说的“钩子”。 那么Hooks要怎么用呢？“你需要写什么功能，就用什么钩子”。对于常见的功能，React为我们提供了一些常用的钩子，当然有特殊需要，我们也可以写自己的钩子。下面是React为我们提供的默认的四种最常用钩子

不同的钩子为函数引入不同的外部功能，我们发现上面四种钩子都带有 use 前缀，React约定，钩子 一律使用 use 前缀命名。所以，你自己定义的钩子都要命名为useXXX。

下面介绍四种默认钩子的用法

我们知道，纯函数组件没有状态， useState() 用于为函数组件引入状态。 下面我们使用Hooks重写上面的计数器。

通过上面的代码，我们实现了一个功能完全一样的计数器，代码看起来更加的轻便简洁，没有了继承，没有了渲染逻辑，没有了生命周期等。这就是hooks存在的意义。 在 useState() 中，它接受状态的初始值作为参数，即上例中计数的初始值，它返回一个数组，其中数组第一项为一个变量，指向状态的当前值。类似 this.state ,第二项是一个函数，用来更新状态,类似 setState 。该函数的命名，我们约定为 set 前缀加状态的变量名。

该钩子的作用是，在组件之间共享状态。关于Context这里不再赘述，其作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。 下面是一个例子，现在假设有A组件和B组件需要共享一个状态。

我们看下页面

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 中有了你输入的值。