qq_21696621的博客

参考：https://blog.youkuaiyun.com/wu_xianqiang/article/details/103981087 没使用memo例子 每次点击button，Counter组件都会被渲染两次； import React,{Component,useState,useMemo,memo} from 'react'; const Counter = ({value, children}) => { console.log('Render: ', children) ret

基础context写法 import React,{createContext, useState} from 'react'; const CountContext = createContext(); class Foo extends React.Component{ render(){ return ( <CountContext.Consumer> { count => <h1>{count}&lt

class方式componentDidMount、componentWillUnmount、componentDidUpdate生命周期函数 import React from 'react'; export default class App extends React.Component { state = { count:0, size:[window.innerWidth,window.innerHeight] }; onResize = ()=>{ th

单状态（state） import React , {useState} from 'react'; export default function App() { const [count,setCount] = useState(0); // 声明一个叫 “count” 的 state 变量,初始值设置0 return ( <button type="button" onClick={()=>{setCount(count+1)}} &gt

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 类组件的不足： 状态逻辑复用难 缺少复用机制 渲染属性和高阶组件导致层级冗余 趋向复杂难以维护 生命周期函数混杂不相干逻辑 相干逻辑分散在不同生命周期 this指向困扰 内联函数过度创建新句柄 类成员函数不能保证this Hook优化类组件的三个不足 自定义Hook方便复用状态逻辑 副作用的关注点分离 函数组件无this问题 例