React Hooks之useState、useEffect使用

2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。

State Hook（useState）:

　　state hook最主要的作用是获取需要的state和更新state方法。

　　使用方法：const [state, setState] = useState(initialState);

　　与原来未使用hooks方法对比：

// 原来Class写法
import React, { Component } from 'react'

 class Eaxmple extends Component {
   constructor (props) {
     super (props) 
     this.state={count:0}
   }
  render() {
    return (
      <div>
        <p>总数:{this.state.count}</p>
        <button onClick={this.add.bind(this)}>增加</button>
      </div>
    )
  }
  add() {
    this.setState({count:this.state.count+1})
  }
}
export default Eaxmple

// react hooks写法
import React,{useState} from 'react'

const EaxmpleHooks = () => {
  const [ count , setCount ] =useState(0)//数组解构
  return (
    <div>
       <p>总数:{count}</p>
        <button onClick={()=>setCount(count+1)}>增加</button>
    </div>
  )
}
export default EaxmpleHooks

　　相比而言，简洁明了了许多。

Effect Hook（useEffect）:

　　useEffect方法是在每次渲染之后执行，可以理解为class写法中的componentDidMount / componentDidUpdate / componentWillUnmount（不完全一样）。

　　使用方法：useEffect(() => {}, []);

　　使用条件：useEffect的第二个参数是一个数组，只有当数组中的的值发生改变的时候才会调用effect，如果执行在第一次挂载和卸载的时候调用，只需要传一个[]。

　　与原来未使用hooks方法对比：

// 原来Class写法
import React, { Component, useState } from 'react'

class Eaxmple extends Component {
  constructor (props) {
    super (props) 
    this.state={count:0}
  }
  componentDidMount() {
    console.log(`componentDidMount => clicked ${this.state.count}`);
  }
  componentDidUpdate() {
    console.log(`compomentDidUpdate  => clicked ${this.state.count}`);
  }
  componentWillUnMount() {
    console.log(`componentWillUnMount => clicked ${this.state.count}`);
  }

  render() {
    return (
      <div>
        <p>总数:{this.state.count}</p>
        <button onClick={this.add.bind(this)}>增加</button>
      </div>
    )
  }
  add() {
    this.setState({count:this.state.count+1})
  }
}
export default Eaxmple

// react hooks写法
import React,{useState, useEffect} from 'react'

const EaxmpleHooks = () => {
  const [ count , setCount ] =useState(0)//数组解构
  useEffect(() => {
    console.log(`clicked ${count}`);
  });

  // 传入[]参数，只执行一次
  // useEffect(() => {
  //   console.log(`clicked ${count}`);
  // }, []);

  // 监控count变化，一旦变化立即执行
  // useEffect(() => {
  //   console.log(`clicked ${count}`);
  // }, [count]);

  // 数据解绑销毁
  // useEffect(() => {
  //   console.log(`我来了...`);
  //   return () => {
  //     console.log(`我走了...`); 
  //   }
  // }, []);

  return (
    <div>
       <p>总数:{count}</p>
        <button onClick={()=>setCount(count+1)}>增加</button>
    </div>
  )
}
export default EaxmpleHooks

React Hooks 使用起来非常的简单，上面我们就写使用 useState和useEffect函数组件对比。