React Hooks

最新推荐文章于 2023-10-29 17:40:32 发布

Jayson柴

最新推荐文章于 2023-10-29 17:40:32 发布

阅读量104

点赞数

文章标签： react

原文链接：https://juejin.cn/post/6844903709927800846

版权

React中的Hooks

React为什么要搞一个Hooks？

想要复用一个有状态的组件太麻烦！！！

无状态组件（Function）、有状态组件（Class）

一、一个简单的Hooks

一个简单的Hooks

首先看一下简单的有状态组件：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

使用Hooks的版本：

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

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

现在Example变成了一个函数，而且这个函数有自己的状态（count），同时它可以更新自己的状态（setCount）；

这个函数之所以拥有如此强大的功能，是因为它注入了一个hook-useState，这个hook让我们的函数变成了一个有状态的函数；

Hooks本质上是一类特殊的函数，可以为函数型组件注入一些特殊的功能。

二、高阶组件

高阶组件：一个函数接受一个组件作为参数，经过一系列加工后，最终返回一个新的组件；下面的例子中withUser函数就是一个高阶组件，它返回了一个新的组件，这个新的组件具有它提供的获取用户信息的功能。

const withUser = WrappedComponent => {
  const user = sessionStorage.getItem("user");
  return props => <WrappedComponent user={user} {...props} />;
};

const UserPage = props => (
  <div class="user-container">
    <p>My name is {props.user}!</p>
  </div>
);

export default withUser(UserPage);

三、什么是State Hooks？

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

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

上述代码中state hooks做了什么呢？

声明一个状态变量

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
}

useState是react自带的一个hook函数，作用是来声明状态变量；

useState这个函数接收的参数是状态初始值（initial state 本例中为0），返回一个数组，这个数组的第[0]项是当前的状态值，第[1]项是改变状态值的方法函数。

本例中：声明了一个状态变量count，把它的初始值设为0，同时提供了一个可以更改count的函数setCount。（本例的写法用到了ES6的数组解构）

30分钟掌握ES6

写成这样的形式也可以：

let _useState = useState(0);
let count = _useState[0];
let setCount = _useState[1];

读取状态值

<p>You clicked {count} times</p>

更新状态

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

用户点击按钮，调用setCount函数，这个函数接收的参数是修改过的新状态的值；接下来的事情交给react；react将重新渲染Example组件，使用更新后的新的状态，即count=1；

问题来了：
Example本质上也是一个普通的函数，为什么它可以记住之前的状态？

通常来说，在一个函数中声明的变量，当函数运行完成后，这个变量也就销毁了（不考虑闭包等情况）；

function add(n) {
    const result = 0;
    return result + 1;
}

add(1); //1
add(1); //1

每一次调用add函数，result变量都是从初始值0开始的；

那为什么react中的Example函数每次执行的时候，都是拿上一次执行完的状态作为初始值？
答案：是react帮我们记住的。

那问题又来了：如果一个组件有多个状态值怎么办？

首先：useState可以多次调用：

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}

其次，useState接受的出示值没有规定一定要是string/number/boolean这种简单的数据类型；完全可以接受对象或者数组作为参数。

唯一要注意的是：之前的this.setState做的是合并状态后返回一个新状态，而useState直接替换老状态后返回新状态；

⚠️useState无论调用多少次，相互之间都是独立的。

hook一方面直接用在function中，而不是class中；另一方面每一个hook都是相互独立的，不同组件调用同一个hook也能保证各自状态的独立性；

react如何保证多个useState之间的相互独立？

 const [age, setAge] = useState(42);
 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

我们并没有告诉react这些值对应的key是哪个，那react是怎么保证这三个useState找到它们对应的state呢？

答案：根据use State出现的顺序来定；

  //第一次渲染
  useState(42);  //将age初始化为42
  useState('banana');  //将fruit初始化为banana
  useState([{ text: 'Learn Hooks' }]); //...

  //第二次渲染
  useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
  useState('banana');  //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
  useState([{ text: 'Learn Hooks' }]); //...

修改代码：

let showFruit = true;
function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  if(showFruit) {
    const [fruit, setFruit] = useState('banana');
    showFruit = false;
  }
 
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

这样一来：

 //第一次渲染
 useState(42);  //将age初始化为42
 useState('banana');  //将fruit初始化为banana
 useState([{ text: 'Learn Hooks' }]); //...

 //第二次渲染
 useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
 // useState('banana');  
 useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错

鉴于此，react规定我们必须把hooks写在函数的最外层，不能写在if else等条件语句当中，来确保hooks的执行顺序一致。

四、什么是Effect Hooks？

useEffect做了什么？

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

首先，我们声明了一个状态变量count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给useEffecthook传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。

⚠️

react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染（componentDidMount），和之后的更新导致的重新渲染（componentDidUpdate）。
useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。

useEffect如何解绑副作用？
这种场景很常见，当我们在componentDidMount里添加了一个注册，我们得马上在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。
为什么要让副作用函数每次组件更新都执行一遍？

当我们在componentDidMount里添加了一个注册，在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册；假如这时候，props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：

但是使用useEffect可以解决这个问题；

1.页面首次渲染
2.替friend.id=1的朋友注册

3.突然friend.id变成了2
4.页面重新渲染
5.清除friend.id=1的绑定
6.替friend.id=2的朋友注册 …

怎么跳过一些不必要的副作用函数？

每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句

Jayson柴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Hooks

React中的HooksReact为什么要搞一个Hooks？想要复用一个有状态的组件太麻烦！！！无状态组件（Function）、有状态组件（Class）一、一个简单的Hooks一个简单的Hooks首先看一下简单的有状态组件：class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render()
复制链接

扫一扫