Reactv16.7.0-alpha.2 Hooks学习

Hooks的来源

Hooks => 钩子，顾名思义，为了解决在函数组件（Function Component）中使用state和生命周期，同时提高业务逻辑复用。

Function Component == Puer Render Function 函数组件等同于一个纯的专门用作渲染的函数，我们知道，在函数组件中，我们无法使用state和生命周期，这也是Hooks为了解决的问题。

第一个API: useState

import { useState } from react // 引入
const [count, setCount] = useState(0)    
相当于
this.state ={ count = 0} 所以 useState(arg)放数组 字符串 对象都可以，就是起到一个初始化state的作用
setCount 相当于 this.setState({count: count})
count = count + 1 这样的写法是错的，不能直接修改state的值，需要使用setCount(value)
我们可以声明多个状态

第二个API: useEffect

这个函数是为了解决当状态或者传入的props发生变化后，需要做出的逻辑处理

比如： count + 1 后， 就会触发

useEffect( () => {
// 逻辑处理在这里
}, [count])  //第二个参数是绑定需要监听变化的参数

下面是一个完整的例子

父组件中传入的props value 每秒 + 1 父组件就不贴代码了，文末有完整代码地址
这个项目里包含自定义Hook 以及useEffect的触生命周期，包含自身state以及父组件传入prop改变后，useEffect的用法

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

// 自定义hooks
function diyHooks (value) {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if(value % 2 === 0) {
      setFlag(true)
    } else {
      setFlag(false)
    }
    console.log(flag)
  }, [value])

  return flag;

}


function Try (props) {

  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  const value = props.value
  const flag = diyHooks(props.value)

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

  useEffect(() => {
    console.log('number', number);
  }, [number])


  useEffect(() => {
    console.log('props', value)
  }, [value])

  return (
    <div>
      <span>{flag === true ? 'true' : 'false'}</span>
      <span>{value}</span>
      <button onClick={() => {
        setCount(count + 1)
        if(count % 2 ===  1) {
          setNumber(number + 1)
        }
      }}>Try It</button>
    </div>
  )
}

export default Try;

关于自定义hooks，我写了一个react-hooks 介绍了React Hooks的简单用法