react新特性hooks开发

react新特性hooks开发

react组件开发有两种形式一种是基于类的开发，一种是通过function+hooks开发
hooks是可以让react在不使用类定义的时候，在使用方法也可以有状态的一种方式

1.UseState

注意：useState不能进行条件渲染不然就报错，另外还有这个方法是异步打印是之前的值，如果数值没改变可以选择用div进行展现

import './App.css';

import React, { useState } from 'react' //首先引入useState

export default function App() {
  const [count,setState]=useState(1)
   //在这里说明一下useState（初始值）这里用的数组结构方式跟对象结构差不多
   //useState(1)[0]=count  true  这里count在没有执行方法之前等于初始值
   //useState(1)[1]=setState  true  这里是方法
  return (
    <div>
      <p>{count}</p>
      <button onClick={()=>{setState(count+2)}}>+1</button>
    </div>
  )
}

2.useEffect

这个hooks 相当于代替类组件中的componentDidMount跟componentDidUpdate这两个生命周期函数
也就是初次渲染跟修改的时候

 useEffect(()=>{
    console.log('我触发了'); //这个函数会在组件初次渲染跟组件改变时触发
  })

3.useRef

useRef可以看作是一个可以自定义的盒子，他在整个组件的生命周期的值是不变的

因此我们需要这样做

import React, { useRef, useState, useEffect } from 'react'
export default function Index() {
  const [count,setCount] = useState(1)
  const numRef =  useRef(count)
  //每次count发生改变都会触发这个函数
  useEffect(()=>{
  	//因为useRef在整个生命周期中数值不改变，因此我们需要做这一步
  	//useRef创建之后会在里面创建一个current对象属性，就是元素的内容
    numRef.current = count
    console.log(numRef);
    console.log(count);
  },[count])
  return (
    <div>
      <h2>{numRef.current}</h2>
       {count}
      <button onClick={e=>setCount(count + 10)}>+10</button>
    </div>
  )
}

4.useContext

useContext相当于调用仓库的的一个方法,跟vue的时间线传值一个道理
在这里注意一个点，很多人都不理解useContext，只知道在一个文件下面写，但是两个文件写的话发现并没有什么用，并且值传不过去，其实是缺少了共同作用域，没有共同的上下文，这是我们需要提出一个共同的上下文，然后在父子组件中导入就行

import React , {useContext} from 'react'

const Index = ()=>{
	//1.首先创建一个上下文
    const UseContextCon = React.createContext()
    const Son = () =>{
    	//3.在son组件中取传递的数据是就需要使用useContext
        const {name}  = useContext(UseContextCon)
        return (
            <p>我是son组件 我的名字是{name}</p>
        )
    }
    const Child = () =>{
        const {name}  = useContext(UseContextCon)
        return (
            <p>我是child组件 我的名字是{name}</p>
        )
    }
    return (
    	//2.使用provider进行数据传递注意只传递给包裹里面的组件，name就是传递的数据
        <UseContextCon.Provider value={{name:'context'}}>
            <Son />
            <Child/>
        </UseContextCon.Provider>
    )
}

export default Index

5.useReducer

useReducer说白了就是对useState的一种优化方案

• 更容易管理大量状态
• 更容易被其他开发者理解
• 更容易被测试

看了很多官方解释我的理解是，useReducer相当于vue中的vuex可以存储修改大量的数据，而useState只相当于里面useReducer中的dispatch函数，相当于是里面的子集，当比较分散比较简单的数据就用useState,当比较复杂比较集中的数据就用useReducer，比如对象数组

6.useMemo,useCallback,memo

因为在平时渲染中只要父组件中的数据发生改变，子组件也会随之发生渲染，如果说父组件中改变的数据与子组件无关，那么子组件的重新渲染就是多余的，就好比发生火灾，然后你听到火灾的地点跟你不是一个城市，那么你就不需要慌张，那么如何去避免这种渲染呢
就需要使用memo来包裹你的子组件，就好比你的家是用铁皮做的，火烧不到，加了层保护罩，但是只能做浅比较，第二个参数就是比较的数据，只能是基本数据，如果要深层次的，就需要根据你的业务环境来处理

memo是对组件进行一个缓存，useCallback,useMemo是对组件中的方法或者数值进行缓存
useCallback 常用与缓存返回的是一个函数也就是渲染模板 ，
useMemo常用于返回的是个数值
因此useCallback是useMemo的变体。

useMemo(()=>return fn);
//等价
useCallback(fn);