Stephy_Yy

useEffect：dom完成渲染后执行不传参数，每次都会执行传空的依赖[]，只会执行一次有依赖，依赖项变化会执行useEffect实现动画效果import { useEffect, useRef, useState } from "react"const App = () => { const [, setCount] = useState({}) const refDiv = useRef() useEffect(() => { .

useRef在每次执行时返回的是同一个引用（返回的ref对象在组件的整个生命周期内保持不变）在函数组件中可以使用useRef和createRef但useRef性能比createRef好，快在类组件中，createRef是在初始化constructor时被赋值的（执行一次）类组件中的createRef23 Refs的应用场景与选用思考25 Refs转发机制与在高阶组件中的使用函数组件useRefimport { createRef, forwardRef, useRef } from 'r.

useMemo优化渲染现象App每次重新执行时，render变化了，引用的render不是同一个函数import React, { useState, } from "react";const Foo = props => { return <ul>{props.render()}</ul>}function App() { const [range, setRange] = useState({ min: 0, max: 10 })

类组件createContext、静态属性contextType 与函数组件useContext 的对比import { Component, createContext, useContext } from 'react'const AppContext = createContext(0)class Foo extends Component { render() { return ( <AppContext.Consumer> .

pureComponentimport { useState } from "react"// useReducer,// 统一调度function reducer(state, action) { console.log('reducer接收参数', state, action) const { type } = action switch (type) { case 'add': return { num: state.num .

副作用：和外部有交互引用外部变量调用外部函数修改dom、全局变量ajax计时器（依赖window.setTimeout）存储相关纯函数：相同的输入一定会得到相同的输出Effect Hook可以让你在函数组件中执行副作用操作类组件中处理副作用在componentDidMount/componentDidUpdate声明周期中（真实dom构建以前）useEffect执行时机初次渲染之后 didMount（真实dom构建以后）渲染更新时 didUpdate是异步的，在回调.

Hook，使用在函数组件中不要在循环，条件或嵌套函数中(if、switch、for)调用 Hook1. 函数指向相同的引用更新方式：函数组件中state变化时才重新渲染（React使用Object.is比较算法来比较state）；而类组件每次都会更新2.强制刷新函数组件import { useState } from 'react'window.arr = []// create react app是基于webpack（模块化打包工具），如果用var声明arr，arr只是在.