React hooks编码方式

新版本新特性解读

• render支持返回数组和字符串

 return [<div>1</div>,<div>2</div>]

• 错误边界捕获
• 提升SSR渲染速度，支持流式渲染
• 减少文件体积
• 生命周期函数更新

1、由于异步渲染的改动，有可能会导致
componentWillMount,componentWillReceiveProps,componentWillUpdate执行，所以抛弃这三个生命周期函数

2、createContext不必一层层传递，可以指定数据共享范围
3、createRef
4、hooks开发方式更新

hooks出现的意义是什么

• hooks之间状态独立，依赖独立的状态来更新
• 让函数组件有了状态管理
• 解决了组件树不直观、类组件难维护、逻辑不易复用的问题
• react多了第二个参数，依赖特定的参数执行函数

学习hooks的意义是什么

• 高效开发
• 提高组件复用性
• 提高逻辑复用性
• 提升性能
• 实现更复杂的功能

应用场景

• 利用hooks取代生命周期函数
• 让函数组件拥有状态
• 组件辅助函数
• 处理发送请求
• 存取数据
• 做好性能优化

useState

import React, { useState } from "react";
const [name, setName] = userState("");

useEffect(类似于componentDidMount)

import React, { useEffect } from "react"; 
useEffect(() => {
    //2、再执行外面的函数
    return () => {
        //1、执行一些销毁的内容，先执行
    }
},[])//第二个函数是依赖执行的参数列表，无其他列表只执行一次，否则依赖后面参数变化来执行

//执行实际是render之后

useLayoutEffect(类似于componentWillMount)

import React, { useLayoutEffect } from "react"; 
useLayoutEffect(() => {
    
},[])//dom更新完成之后执行操作，第二个函数是依赖执行的参数列表，无其他列表只执行一次，否则依赖后面参数变化来执行
// 比useEffect先执行

useMemo

import React, { useMemo } from "react"; 
const getDoubleNum = useMemo(() => {
console.log('getDoubleNum'); //跟随num改变，缓存2*num
return 2*num
},[num])

return <div onClick={() => {setAge(age+1)}}>这是一个函数组件num:{getDoubleNum}age:{age}</div>

useCallback

  const getDoubleNum = useCallback(() => {
    console.log('getDoubleNum');
    return 2*num
  },[num])

  return <div onClick={() => {setAge(age+1)}}>这是一个函数组件num:{getDoubleNum()}age:{age}</div>

useMemo跟useCallback对比

• useMemo返回的是一个值
• useCallback返回的是一个函数
• useMemo缓存的是一个值，useCallback缓存的是一个函数

const getDoubleNum = useCallback(() => {
    console.log('getDoubleNum');
    return 'test'
  },[num])
  set.add(getDoubleAge)
  console.log(set.size);//一直是2，不递增。传到子组件不会带动子组件更新

  const getDoubleAge = useMemo( () => {
    return age * 2
  },[age])
  set.add(getDoubleAge)
  console.log(set.size);//每次递增传到子组件，会带动子组件依赖函数执行

useRef

保存计时器内容

  const timer = useRef()
  useEffect(() => {
    timer.current = setInterval(() => {
      setNum(num => num+1)
    },400)
  },[])
  useEffect(() => {
    if(num > 10) {
      console.log('超过10秒了');
      clearInterval(timer.current)
    }
  },[num])

useContent(带动子组件内容变化)

const Context = createContext(null)
function StateFunction () {
  const [num, setNum] = useState(1) 
  const [age, setAge] = useState(12) 

  return <div onClick={() => setNum(num + 1)}>
    这是一个函数组件num:{num}
    <Context.Provider value={{num,age}}>
      <Item1></Item1>
      <Item2></Item2>
    </Context.Provider>
  </div>
}

function Item1() {
  const num = useContext(Context);
  console.log('num',num);
  return <div>子组件{num.num+1}</div>
}
function Item2() {
  const num = useContext(Context);
  return <div>子组件{num.num +2}</div>
}
export default StateFunction;

useReducer

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

const store = {
  num: 1
}

const reducer = (state, action) => {
  switch(action.type) {
    case "changeNum":
      return {
        ...state,
        num: action.num
      };
    default:
      return {
        ...state
      };
  }
}


function StateFunction () {
  const [state, dispatch] = useReducer(reducer,store);

  return <div onClick={() => dispatch({
    type: 'changeNum',
    num: 100
  })}>
    这是一个函数组件num:{state.num}
  </div>
}

export default StateFunction;

useImperativeHandle

是为了函数组件可以使用ref

import React, { forwardRef, useImperativeHandle, useEffect, useRef } from 'react'

const TestRef = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    open() {
      console.log("open")
    }
  }))
})

function App () {
  const ref = useRef()
  useEffect(() => {
    ref.current.open() //open
  },[])
  
  return(
    <>
      <div>石小阳</div>
      <TestRef ref={ref}></TestRef>
    </>
  )
}
export default App

自定义hooks使用

loadData.js:

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

 function useLoadData() {
  const [num, setNum] = useState(1);
  useEffect(() => {
    setTimeout(() => {
      setNum(2)
    },1000)
  },[])
  return [num,setNum]
}

export default useLoadData

使用方：

import useLoadData from './loadData.js';
function StateFunction () {
  // const [state, dispatch] = useReducer(reducer,store);
  const [num, setNum] = useLoadData();

  return <div>
    这是一个函数组件num:{num}
  </div>
}
export default StateFunction;

抽离useLocalReducer

useLocalReducer.js

import React, { useState, useReducer} from "react";
const store = {
  num: 1
}

const reducer = (state, action) => {
  switch(action.type) {
    case "changeNum":
      return {
        ...state,
        num: action.num
      };
    default:
      return {
        ...state
      };
  }
}

function useLocalReducer() {
  const [state, dispatch] = useReducer(reducer, store);
  return [state, dispatch]
}

export default useLocalReducer;

使用方：

import React, { useState, useReducer} from "react";
import useLocalReducer from './useLocalReducer'


function StateFunction () {
  // const [state, dispatch] = useReducer(reducer,store);
  const [state, dispatch] = useLocalReducer();

  return <div onClick={() => { dispatch({
    type: 'changeNum',
    num: 100
  })}}>
    这是一个函数组件num:{state.num}
  </div>
}

export default StateFunction;