React 提供 Hook Api

• useState

• 类型: string | number | boolean | Array | Object
• 描述: useState是一个函数，代表是组件里的一份状态,一个组件可以初始化多份状态。具体用法如下,必须要初始化完之后再用,不用通过改变顺序

import React, {useState} from 'react';

export default (props)=>{
    // 返回一个数组,
    let [count, setCount] = useState(0);
    let [list, setList] = useState([
        {title: '华泰'}
    ]);
    let [count, setCount] = useState({
        title: '华泰'
    });
    return(
        <div>{count}</div>
        <button onClick={()=> setCount(count+1)}>改变值</button>
    )
}

• useEffect(fn, []) 异步执行

-# useLayoutEffect(fn,[]) 同步执行

• 描述: useEffect是一个函数，它类似于class 组件的componentDidMount(),componentDidUpdate(), componentWillUnmount(),生命周期, 如需在对应的生命周期函数中做什么操作可以在此hook中操作。不会阻塞视图渲染，异步执行。

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

export default (props)=>{
    let [count, setCount] = useState(0);

    
    
    /*  
        1.如不传第二个参数,每次组件渲染都会执行。
        2.如传对应的变量数据,变量更新之后就会调用。
        3.如传空数组, 类似componentDidMount
    */
    useEffect(()=>{},[count]) 

    useEffect(()=>{
        // .... ...
        // 最后可以返回一个函数,代表下次组件渲染更新, 可以在里面清楚定时器，解绑事件等操作
        return ()=>{
            
        }
    },[]) 

    return(
        <div>{count}</div>
        <button onClick={()=> setCount(count+1)}>改变值</button>
    )
}

• React.Memo(fn)

• 描述: 这个并不算一个hook, 它是用来优化组件渲染的，只会对比porps, 我们知道React组件父组件渲染更新，子组件也会同时渲染，如子组件接收的props 并未更改，子组件其实可以不用更新的。

import React from 'react'

export default React.Memo((props)=>{
    return(
        <div>
            <p>{props.count}</p>
            <p>我是一个只接收porps 的视图组件</p>
        </div>
    )
})

• useMemo(fn, [])

• 描述: 用法更useEffect类似, 这个hook类似 shouldComponentUpdate 生命周期，优化组件是否渲染，
  同步执行。

import React, {useState} from 'react';

export default (props)=>{
   
    let [count, setCount] = useState(0);
    let [list, setList] = useState([
        {title: '华泰'}
    ]);

    let Childs = useMemo(()=><Child vlaue={list} / >, [list])
  
    return(
        <div>
            <div>{count}</div>
            {Childs}
            <button onClick={()=> setCount(count+1)}>改变值</button>
        </div>
    )
}

-# userContext(Context)

//  App.js 
import React, {useState, createContext} from 'react'
import Counter from './component/Counter'


let params = {name: "阿里巴巴",age: 10}
export const CountCtx = createContext(params)
export default (props)=>{
    let [obj, setAge] = useState(params)
    let handleChange = ()=>{
        setAge({
           ...obj,
           age: obj.age+2
        })
    }
    return(
        <CountCtx.Provider value={obj}>
            <Counter/>
            <button onClick={ handleChange }>改变数字{obj.age}</button>
        </CountCtx.Provider >
    )
}

// Counter.js

import React, { useContext } from "react"
import { CountCtx } from "../App"

function Counter() {
    const params = useContext(CountCtx)
    console.log(params)
    return (
        <div>{params.name} is {params.age}</div>
    )
}

export default Counter

// Child.js
import React, {useContext} from 'react'
import { CountCtx } from "../App"

export default function (props) {
    let params = useContext(CountCtx)
    return(
        <div>
             <div>{params.name} is {params.age}</div>
            <p>我是Child组件</p>
        </div>
    )

• userRef() 获取节点对象。

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

export default (props)=>{
    let [count, setCount] = useState(0);
    // 返回一个对象
    let node = useRef()
    
    useEffect(()=>{
        console.log(node.current)
    },[count])

    return(
        <button ref={node} id="btn" onClick={ ()=> setCount(count+1) }>{count}</button>
    )
}