React Hooks

Hooks 简介

React Hooks 是用函数的形式代替原来继承类的形式,并使用预函数的形式管理state

代码对比

现在我们来写一个点击添加一的组件

• 原始写法👇

import React, { Component } from 'react';

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

export default Example;

• Hooks 写法

import React, { 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>
    )
}
export default Example;

useState介绍

现在我们从三个方面来看useState的用法,分别是声明、读取、使用(修改)

声明

const [count , setCount] = useState(0)
这种方法是用了ES6中数组的解构,取到了useState(0)的第0、1位
意思是声明了一个状态变量count,并把它的初始值设为0,同时提供了一个setCount来改变count值的方法函数

读取

<p>You clicked {count} times</p>
读取和react之前的类函数读取是一样的,想在jsx里使用,使用{}就可以

修改

<button onClick={()=>{setCount(count+1)}}>click me</button>
直接调用setCount函数,这个函数接收的参数是修改过的新状态值.

useEffect代替常用的生命周期函数

在用Class制作组件时,经常会用生命周期函数来处理一些额外的事情.在React Hooks 中也需要这种类似的生命周期函数

用Class的方法为计数器增加生命周期函数

先用原始的方法把计数器的Demo增加两个生命周期函数componentDidMount和conmponentDidUpdate.组件第一次渲染和更新时调用.

import React, { Component } from 'react';

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


    componentDidMount(){
        console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
    }

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

export default Example3;

用useEffect函数来代替生命周期函数

代码如下👇 记得要引入useEffect

import React, { useState , useEffect } from 'react';
function Example(){
    const [ count , setCount ] = useState(0);
    //---关键代码---------start-------
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    })
    //---关键代码---------end-------

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

注意点

1. React首次渲染和之后的每次都会调用useEffect函数,而在类函数中我们需要调用两个生命周期函数进行渲染
2. useEffect中函数是异步执行的

useEffects实现componentWillUnmount生命周期函数

在上面点击添加的例子上增加两个router进行跳转
在两个页面的函数中分别写一个useEffect

export default function Example4() {
  const [count, setCount] = useState(0)

  function Index() {
    useEffect(() => {
      console.log('index页面来了')
    })
    return <h2>JSPang.com</h2>
  }

  function List() {
    useEffect(() => {
      console.log('list页面来了')
    })
    return <h2>List-Page</h2>
  }

  return (
    <div>
      <p>You 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 path="/" exact component={Index} />
        <Route path="/list/" component={List} />
      </Router>
    </div>
  )
}

当点击Link进入任意组件的时候,在浏览器中都会打印一句话,这时可以用返回一个函数的方法进行解绑,代码如下

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    })
    return <h2>JSPang.com</h2>;
  }

这时再点击切换的时候确实会出现解绑的函数,但是点击计数器按钮的时候也会出现
其实每次状态发生变化的时候,useEffect都进行了解绑

useEffect的第二个参数

所以到底如何才能实现类似componentWillUnmout的效果呢?
useEffect有第二个参数,它是一个数组.数组中可以写入状态对应的变量,当状态值发生改变的时候才进行解绑,如果传入的值为空数组[]时,就是当组件被销毁时才进行解绑

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

为了加深了解第二个参数的作用,把计数器代码也加上useEffect和解绑方法,并加入第二个参数为空数组👇

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

这时候的代码是不能执行解绑副作用的,但是如果想每次count发生变化时,都进行解绑,只需要在第二个参数的数组里加入count变量就可以了,👇

useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)

        return ()=>{
            console.log('====================')
        }
    },[count])

useContext 让父子组件传值更简单

更新了一些,放着,我又来活了…