React-Hooks带来了什么?

作者: 井润 | 来源:发表于2019-12-07 22:42 被阅读0次

对应的代码仓库:https://codesandbox.io/s/learning-react-hooks-7ssri

其实对应的React-Hooks带来的东西很多,其中有什么我们简单讲解一下:

使用函数的形式代替原来的继承类的形式!
使用预函数的形式管理对应的state!
可以使用React-Hooks来创建带状态的组件而并非使用类!

那么对应的我们使用简单的代码实例学习React-Hooks! 本文中使用的是CodeSandbox而并非使用 create-react-app创建对应的React项目!

对应的 src/index.js代码如下所示:

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<App/>,document.querySelector("#root"));

01|传统的类形式的组件与React-Hooks组件进行对比

import React,{Component} from "react";

class Example extends Component{
    constructor(props){
        super(props);
        this.state = {count:0};
        this.addCount = this.addCount.bind(this);
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
    render(){
        return (
            <div>
                <span>You clicked {this.state.count} times</span>
                <button onClick={this.addCount}>Click me</button>
            </div>
        );
    }
}
export default Example;

其实上面的代码很清楚的就解释了一个最基本的组件是如何的!

下面看看最基本的React-Hooks的组件是如何的!

import React,{useState} from "react";
function Example(){
    const [count,setCount] = useState(0);
    return (
        <div>
            <span>You clicked {count} times</span>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
        </div>
    );
}
export default Example;

其实从对应的单词Hooks中我们就可以知道本身就是钩子的意思! 为的就是让你不在写Class,而是使用function更好的写React!

其中引入的useState其实就是所谓的状态使用,对应的count表示对应的状态setCount很明显就是可以改变状态的方法而使用useState(0)表示当前的count值为0

那么如何理解呢? 在对应的代码中的表示?

useState()接收对应的初始值返回一个数组
数组的第一位也就是所谓的count表示状态变量count
数组的第二位表示设置状态变量的方法setCount

02|React-Hooks的多状态声明

对应的如何使用多状态声明? 上代码

import React,{useState} from "react";
function Example2(){
    const [age,setAge] = useState(22);
    const [sex,setSex] = useState("男");
    const [work,setWork] = useState("frontEnd");
    return (
        <div>
            <p>ProbeDream:今年{age}岁</p>
            <p>性别:{sex}</p>
            <p>工作:{work}</p>
        </div>
    );
}
export default Example2;

其中别人可能会问,如何确定对应的useState找到自己的state呢? React是根据useState出现的顺序确定的!

import React,{useState} from "react";
let showSex = true;
function Example3(){
    const [age,setAge] = useState(22);
    if(showSex){
        const [sex,setSex] = useState("男");
        showSex = false;
    }
    const [work,setWork] = useState("frontEnd");
    return (
        <div>
            <p>ProbeDream:年龄{age}岁</p>
            <p>性别:{sex}</p>
            <p>工作:{work}</p>
        </div>
    );
}
export default Example3;

如果说你写下这一行代码的话,会出现对应的错误就是,useState不能够在ifelse这种条件判断语句中使用! 不然的话会报错的!

由此我们可以知道:React Hooks不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序!

03|useEffect代替常用生命周期函数

其实在我们写React的时候使用class制作组件的时候,会经常使用到生命周期函数来处理特定阶段的事情!

例如说:

Ajax请求后端的数据
添加登录监听和取消登录
手动修改DOM等等

那么对应的问题来了? 如果说使用React-Hooks的话有没有对应的生命周期函数或者说类似于这种功能的方法?

有的,React-Hooks中提供了一种方法叫做useEffect来帮我们解决日常开发中的问题!

import React, { useState, useEffect } from "react";

function Example03() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`effect=>You Clicked ${count} times!`);
  });
  return (
    <div>
      <p>You Clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me!
      </button>
    </div>
  );
}
export default Example03;

通过对应的代码示例便可以知道对应的效果! 我们梳理一下过程

我们声明一个组件,并且给定状态count为初始值0 并且告诉React有一个副作用!
给了useEffect函数里面的匿名函数就是副作用,我们手动更新DOM就会调用副作用一次
等到React更新了State状态的时候就会执行定义的副作用函数!

useEffecct需要注意的点在哪里

React首次渲染和每次更新都会调用useEffect函数,而之前如果说使用class的话就会调用两个函数分别为 ComponentDidMount和ComponentDidUpdate
useEffect定义的函数的执行不会阻碍浏览器更新视图! 对应的函数是异步执行的! 而在class组件中的话ComponentDidMount和ComponentDidUpdate都是同步执行的!

04|使用useEffect实现ComponentWillUnmount生命周期函数

对应的其实这一个生命周期函数还是比较常见的函数,表示组件卸载销毁之前调用! 其中对应的应用场景还是比较丰富的! 例如说:

定时器清空,避免发生内存泄露
登录状态的取消操作,避免下次进入信息出错!

因此在这里就简单介绍一下使用useEffect实现这个函数!并且介绍useeffect对应的需要注意的地方!

useEffect解绑副作用

对应的在React-Hooks中我们应该改掉所谓的生命周期函数的概念,取而代之的是 副作用 的概念! 因此对应的ComponentWillUnmount可以理解成为解绑副作用! 在这里为了更好地理解这些东西,我们需要使用react-router

yarn add react-router-dom

对应的路由表配置也在对应的Example04.jsx中完成:

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Index, List } from "../components/routerComponent";

export default function Example04() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Your Clicked {count} times!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me!
      </button>
      <Router>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/list/">列表</Link>
          </li>
        </ul>
        <Route exact path="/" component={Index} />
        <Route path="/list/" component={List} />
      </Router>
    </div>
  );
}

对应的路由组件的内容如下所示:

import React, { useEffect } from "react";
export function Index() {
  useEffect(()=>{
    console.log(`useEffect=>老弟你来了Index界面!`)
  });
  return <h1>Github.com/probedream</h1>;
}
export function List() {
  useEffect(()=>{
    console.log(`useEffect=>老弟你来了List界面!`)
  });
  return <h1>List-page</h1>;
}

对应的当我们没当点击一个link的时候都会通过useEffect副作用打印出一个内容,对应的打印出对应的内容! 此时我们可以通过返回一个函数的形式进行解绑操作! 此时的代码如下所示:

import React, { useEffect } from "react";
export function Index() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了Index界面!`);
    return () => {
      console.log(`老弟你走了离开了Index页面!`);
    };
  });
  return <h1>Github.com/probedream</h1>;
}
export function List() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了List界面!`);
    return () => {
      console.log(`老弟你走了离开了List页面!`);
    };
  });
  return <h1>List-page</h1>;
}

但是修改了对应的代码之后会发现没次点击都会出现 老弟你走了离开了Index页面! useEffect=>老弟你来了Index界面!的情况!

对应的每次状态发生变化的时候,useEffect都进行了解绑操作!

useEffect的第二个参数

为了达到Class组件中生命周期 ComponentWillUnmount函数的效果,只有对应组件被销毁和卸载之前进行操作,由此我们引申出useEffect的第二个参数:

是一个数组,数组中可以写入很多状态对应的变量! 只有对应状态发生变化的时候我们才进行解绑操作!
传入一个空数组的时候,空数组被销毁的时候才会进行解绑操作! 由此才像ComponentWillUnmount生命周期函数一样!

由此代码进行了下一步的演变:

import React, { useEffect } from "react";
export function Index() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了Index界面!`);
    return () => {
      console.log(`老弟你走了离开了Index页面!`);
    };
  }, []);
  return <h1>Github.com/probedream</h1>;
}
export function List() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了List界面!`);
    return () => {
      console.log(`老弟你走了离开了List页面!`);
    };
  }, []);
  return <h1>List-page</h1>;
}

其中我们根据对应的一些代码,状态的变化会导致副作用的解绑!

如果说计时器中加入对应的代码呢?

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Index, List } from "../components/routerComponent";

export default function Example04() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`Your Clicked ${count} times!`);
    return () => {
      console.log("=============");
    };
  }, []);
  return (
    <div>
      <p>Your Clicked {count} times!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me!
      </button>
      <Router>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/list/">列表</Link>
          </li>
        </ul>
        <Route exact path="/" component={Index} />
        <Route path="/list/" component={List} />
      </Router>
    </div>
  );
}

如果说每次都解绑的话,需要 不传入第二个参数或者如下所示:

import React,{useEffect,useState} from "react";
export default function Example04(){
    const [count,setCount] = useState(0);
    useEffect(()=>{
        console.log(`Your clicked ${count} times`);
        return ()=>{console.log("=============");}
    },[count]);
    return (
        <div>
            <p>Your Clicked {count} times</p>
            <button onClick={()=>setCount(count+1)}>Click me</button>
        </div>
    );
}

05|使用useContext让父子组件传值更加简单

虽然说使用useState和useEffect就已经能够完成大部分的业务了,但是React-Hooks中还是有很多好用的API,比如说:useContext和useReducer

其中因为现在组件的方式使用的是函数的形式,不像Class的类组件一样! 那么对应的父子组件之间如何进行传值操作呢? 这里就需要介绍到我们的useContext了!

useContext解决的是跨组件通信的问题
Redux解决的是状态统一集中管理的问题

之后会介绍到了useReducer帮助我们实现类似于Redux的功能!

其中的代码其实比较好理解,代码如下所示:

import React from "react";
import ReactDOM from "react-dom";
import {Example05} from "../components/Example05";
ReactDOM.render(<Example05/>,document.querySelector("#root"));

import React,{useState,createContext,useContext} from "react";
const CountContext = createContext();
export function Example05(){
    const [count,setCount] = useState(0);
    return (
        <div>
            <p>Your Clicked {count} times!</p>
            <button onClick={()=>{setCount(count+1)}}>Click me!</button>
            <CountContext.Provider value={count}>
                <Counter/>
            </CountContext.Provider>
        </div>
    );
}
export function Counter(){
    const count = useContext(CountContext);
    return <h3>{count}</h3>
}

从对应的代码中应该不难看出对应的代码的作用!

createContext:创建对应的上下文对象 通过对应的Provider提供者传递对应的状态给子组件! 传入的参数为default 默认值
useContext:使用上下文 **传入对应的上下文对象可以拿到提供者对象传递的变量

06|useReducer介绍和简单使用

在开发者使用useReducer可以让代码有很好的可读性和可维护性! 为对应的测试提供方便!

reducer之所以在前端广泛使用,是因为Redux的缘故,但是并不是只存在于Redux中! 对应的reducer只是一个函数,传入两个参数:

一个参数是状态
一个参数是控制业务逻辑的判断参数

也许这么说可能不那么清楚,但是如果说通过对应的代码来看的话,可能会好很多

function countReducer(state,action){
    switch(action.type){
        case "add":
            return state + 1;
        case "minus":
            return state - 1;
        default:
            return state;
    }
}

通过以上代码变很好地说明了两个参数之间的差异性!

01|useReducer的使用

import React,{useReducer} from "react";
export default function Example06(){
    const [count,dispatch] = useReducer((state,action)=>{
        switch(action){
            case "add":return state + 1;
            case "minus":return state - 1;
            default : return state;    
        }
    },0);
    return (
        <div>
            <p>现在的分数为:{count}</p>
            <button onClick={()=>dispatch("add")}>Increment</button>
            <button onClick={()=>dispatch("minus")}>Decrement</button>
        </div>
    );
}

其中需要注意的两个点:

就是reducer和useReducer的区别还是有的,例如说switch中的其实是action,在reducer种的是action.type,对应的state中的初始值是在 useReducer中的第二个参数定义的!

08|useReducer代替Redux案例

对应程序的入口文件main.js:

import React from "react";
import ReactDOM from "react-dom";
import Example from "../Example07/Example07";

ReactDOM.render(<Example07/>,document.querySelector("#root"));

现将程序挂载到首页容器节点上!

import React from "react";
import { Color } from "./Color";
import ShowArea from "./ShowArea";
import Button from "./Button";

export default function Example07() {
  return (
    <div>
      <Color>
        <ShowArea />
        <Button />
      </Color>
    </div>
  );
}

其中涉及到三个组件:

showArea:显示字体
Button:按钮组件
Color:颜色控制组件

import React, { createContext, useReducer } from "react";

export const ColorContext = createContext({});

export const UPDATE_COLOR = "UPDATE_COLOR";

const reducer = (state, action) => {
  switch (action.type) {
    case UPDATE_COLOR:
      return action.color;
    default:
      return state;
  }
};

export const Color = props => {
  const [color, dispatch] = useReducer(reducer, "blue");
  return (
    <div>
      <ColorContext.Provider value={{ color, dispatch }}>
        {props.children}
      </ColorContext.Provider>
    </div>
  );
};

这里主要是对颜色进行统一设置,由此就涉及到了前文中讲到的内容:createContext和useReducer

createContext:用来创建上下文对象
useReducer:用来创建操作器

这个组件当中向外暴露了三个常量,分别为:

ColorContext:颜色上下文对象传入为一个空对象子组件通过useContext拿到的也是空对象!
reducer:作为一个函数根据对应的参数类型判断操作数据
Color:作为跨层传递内容的组件 将对应的内容传递给子组件

import React, { useContext } from "react";
import { UPDATE_COLOR, ColorContext } from "./Color";

export default function Buttons() {
  const { dispatch } = useContext(ColorContext);
  return (
    <div>
      <button onClick={() => dispatch({ type: UPDATE_COLOR, color: "red" })}>
        红色
      </button>
      <button onClick={() => dispatch({ type: UPDATE_COLOR, color: "yellow" })}>
        黄色
      </button>
    </div>
  );
}

引入对应的UPDATE_COLOR常量和颜色上下文!

import React, { useContext } from "react";
import { ColorContext } from "./Color";
export default function ShowArea() {
  const { color } = useContext(ColorContext);
  return <div style={{ color: color }}>字体颜色为blue</div>;
}

其中我通过以下代码打印处获取到的Context对象如下所示:

import React,{useContext} from "react";
import {ColorContext} from "./Color";
console.log(useContext(ColorContext)); // {color,dispatch}

由此不难推导出通过useContext拿到的对象便是value {color,dispatch}对象!

import React,{useReducer,createContext} from "react";

export const UPDATE_COLOR = "UPDATE_COLOR";

export const ColorContext = createContext({});

const Reducer = (state,action)=>{
    switch(action.type){
        case UPDATE_COLOR:return action.color;
        default: return state;    
    }
}
export const Color = props=>{
    const [color,dispatch] = useReducer(Reducer,"blue");
    return (
    <div>
        <ColorContext.Provider value={{color,dispatch}}>
            <props.children/>
        </ColorContext.Provider>
    </div>
    );
}

09|使用useMemo优化React-Hooks的程序

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

export default function Example08() {
  const [xiaoming, setXM] = useState("小明准备中");
  const [xiaowang, setXW] = useState("小王准备中");
  return (
    <div>
      <button
        onClick={() => {
          setXM(new Date().getTime());
        }}
      >
        小明
      </button>
      <button
        onClick={() => {
          setXW(new Date().getDate() + ",小王向我们走来");
        }}
      >
        小王
      </button>
      <ChildComponent name={xiaoming}>{xiaowang}</ChildComponent>
    </div>
  );
}

childComponent

import React from "react";

export default function ChildComponent({ name, children }) {
  function changeXM(name) {
    console.log("小明正在大步向前");
    return name + "小明加油啊!";
  }
  const actionXM = changeXM(name);
  return (
    <div>
      <div>{actionXM}</div>
      <div>{children}</div>
    </div>
  );
}

此时打开对应的程序,你会发现点击小王,总是会出现小明正在大步向前每次都运行何尝不是性能的损耗呢? 因此我们决定使用新的API useMemo予以解决!

import React,{useMemo} from "reat";
  useMemo(()=>changeXM(name),[name]);

更多的特性讲解updating......

React-Hooks带来了什么?

01|传统的类形式的组件与React-Hooks组件进行对比

02|React-Hooks的多状态声明

03|useEffect代替常用生命周期函数

04|使用useEffect实现ComponentWillUnmount生命周期函数

05|使用useContext让父子组件传值更加简单

06|useReducer介绍和简单使用

01|useReducer的使用

08|useReducer代替Redux案例

09|使用useMemo优化React-Hooks的程序

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读