React

1.基础的React

1.1 Context与ContextType

Context提供了一种方式，能够让数据在组件树中传递而不必一级一级的手动传递，但会让组件失去独立性。

context结构

API：createContext（defaultValue？）

import {createContext} from 'react'
const BatteryContext = createContext()

<BatteryContext.Provider value={}>
</BatteryContext.Provider>

<BatteryContext.Consumer>
{
    battery=><h1>{battert}</h1>
}
</BatteryContext.Consumer>

static  contextType = BatteryContext
render(){
    const battery = this.context
}

1.2 lazy与Suspense

暂时没有资源展示---->延迟加载：

• Webpack - Code Splitting
  把一个页面人为的划分为模块进行导入
• import
  1.做静态模块导入
  import 。。。 from
  2.动态模块导入
  import('').then(...)
  typeof import
  webpack就会做一次代码拆分，把import的依赖打包成一个独立的文件，默认情况下，不会马上加载它，只有用到的时候才会导入。指组件渲染的时候。封装的是组件导入的行为，而不是组件本身。而且导入意味着网络请求。

const About = lazy=(()=>import(/*webpackChunkName:'about'*/'./about.jsx'))

lazy的返回就是一个组件
用了lazy后，会存在一个加载中的空档，不知道什么时候加载
这时候用Suspense

<Suspense fallback=(<div>About</div>)>
    <About>
    </About>
</Suspense>

block request url阻止获取请求（当出现加载错误的时候，suspense不能捕获，但错误边界可以）

//ErrorBoundary错误边界
componentDidCatch(){
  this.setState({
  hasError:true
})
}
//一旦发生错误，就返回一个新的state数据，并合并到新的state之中
static getDerivedStateFromError(){
  return {
    hasError：true
}
}

页面首次加载时的性能问题

1.3 memo

shouldComponentUpdate(nextProps,nextState){
  if(nextProps.name === this.props.name){
  //下一次属性中的name和当前属性中的name,如果相等就不再重新渲染，不想等就重新渲染
    return false
    }else{
        return true
          }
}
//或者用PureCompent，需要导入{PureCompent } from React，只有传入数据的本身对比
//(第一级发生变化，比如对象内部不算）2.传入回调函数每次都会重新渲染)，内部的数据变化就不行
class Foo extends PureCompent{
  
}

memo

//函数式的不能用Pure，但是有memo
import {memo} from 'react'
const Foo =  memo(function Foo(props){//返回一个组件
  return ()
})

2.React Hooks

类组件的问题：

• 状态难以复用（渲染组件，高阶组件）
• 渲染属性和高阶组件导致层级冗余
• 生命周期函数混杂不相干逻辑
• 相干逻辑分散在不同的生命周期
• this指向复杂
  hooks优势：
• 函数组件无this问题
• 自定义hooks方便复用状态逻辑
• 副作用关注点分离

2.1 useState

import {useState} from 'react'
const [count ,setCount] = useState(0)
onClick={()=>{setCount(count +1)}}

use每次渲染按照稳定的顺序和稳定的次数。

2.2 useEffect

副作用：

• 绑定事件
• 网络请求
• 访问DOM

副作用的时期：

• Mount之后
• Update之前
• Unmount之前

useEffect

useEffect(()=>{
  window.addEventListener('resize',onResize)
  console.log('count')
  return () => {
  //清空状态函数
window.removeEventListener('resize',onResize)
}
},[])

传入空数组说明只执一次。

2.3 useContext与useMemo/useCallback

import {createContext,useContext} from 'react'
const CountContext = createContext()
<CountContext.Provider value={}></>
function Counter(){
  const count = useContext(CountContext)
console.log(count)
}

useMemo：
仅仅用来做性能优化使用，不能做改变渲染逻辑的用途
const double = useMemo(()=>{
return count *3
},[count])调用时机在渲染期间，而useEffect是在副作用时期，useMemo是有返回值，可以参与渲染，不能循环依赖
useCallback:

const onClick = useMemo(()=>{
  return ()=>{
  console.log('click')
}
},[])

const onClick = useCallback(()=>{
  console.log('click')
},[])

useMemo返回值是一个函数。则等价于useCallback
使onclick函数不会变化，useCallback会创建函数，但是如果没有变化，则不会返回，当依赖变化时，才会执行。

2.4 useRef

• 获取子组件或者DOM节点的句柄
• 渲染周期之间共享数据的存储
  state也能储存数据，但state会触发重渲染。

import {useRef} from "react"
const counterRef = useRef()
<Counter ref= {counterRef}>
console.log(counterRef.current)
//注意只能是类组件
const it = useRef()
it.current = ....
下一次渲染就能获取到了

2.5 Redux

redux：状态容器与数据流管理

• 单一数据源
• 状态不可变（修改完之后不再是以前的Redux）
• 用纯函数来修改状态