localhost

React 之 re-render原理探索和优化

钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的成本。使用 Hooks 的惯用代码不需要在使用高阶组件、渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用更小的组件树，React 要做的工作更少。

React setState默认是异步，但有时候是同步如果setState是同步的，意味着每执行一次setState时，都重新vnodediff + dom修改，这对性能来说是极为不好的。如果setState是异步，则可以把一个同步代码中的多个setState合并成一次进行批量更新。由React控制内的事件处理函数(onChange、onClick等合成事件)，以及生命周期函数调用setState时表现为异步。在setTimeout或者原生事件中，setState是同步的一般情况:.

父组件获取子组件数据:import React, { useState, useImperativeHandle, useRef, forwardRef } from 'react'import ReactDOM from 'react-dom'// 1: 函数组件没有实例 需要用forwardRef包装const Child = forwardRef((props, childRef) => { const [state, setstate] = useState({ name:

默认情况下，不能在函数组件上使用ref属性，因为它们没有实例可以在函数组件内部使用ref属性，只要它指向一个 DOM 元素或 class 组件import React, { useRef, useEffect } from 'react'import ReactDOM from 'react-dom'const Child = () => { const inputRef = useRef(null) useEffect(() => { inputRef....

HOC介绍:高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。重点是复用逻辑HOC介绍看这里(一):不用HOCChild1组件:// Child1组件:监听窗口resize,展示窗口大小const Child1 = () => { const [position, setPosition] = ..

1:通过createContext创建自己的context2:定义要传递的数据3:用Provider包裹要接收数据的组件// 1: 通过createContext创建自己的contextconst userContext = createContext()const App = () => { // 2: 定义要传递的数据 const userInfo = { name: 'superTiger_y', age: 22 } return ( // 3: xxx..

import React, { useEffect, useState } from 'react'import ReactDOM from 'react-dom'const Test = () => { console.log('render') const [count, setCount] = useState(0) useEffect(() => { console.log('开启定时器') const timer = setInterval(() =.