随笔分类 - React
摘要：React Fiber 是 React 16 引入的全新协调算法，与之前的递归栈式架构不同，Fiber 架构显著增强了 React 在性能和灵活性方面的能力。以下是 Fiber 的四个主要优点及其解释： 1. 优先级机制 Fiber 架构引入了任务的优先级调度机制，通过为不同类型的任务分配优先级，R
阅读全文
摘要：3 assumptions Code is valid JavaScript Test values / properties are defined before acceessing them Code follows Rules of React React Compiler will mos
阅读全文
摘要：How does React handle updates ? How React Communicates With the Renderer ? the renderer that handles the updates setState calls renderer The Update Wh
阅读全文
摘要：React hooks allow us to use React features without writing a class state (useState, useReducer) component lifecycle (useEffect) much more(useRef, useC
阅读全文
摘要：The basic concepts of React reconciliation virtual DOM rendering diffing algorithm pre-knowledge understand the difference between React components, e
阅读全文
摘要：What is React Fiber? Fiber = {...} Fiber reconciler = current React reconciler based on Fiber (React >= 16) complete rewrite of React that fixed long-
阅读全文
摘要：* ContactList.js export default function ContactList({ selectedContact, contacts, onSelect }) { return ( <section className="contact-list"> <ul> { con
阅读全文
摘要：示例图 usePageSizeSelect.js import {useState} from "react"; import Bus from "../../utils/eventBus"; export function usePageSizeSelect() { const onInputKe
阅读全文
摘要：function A() { return (<> This is A component </>) } function B() { let msg = useContext(MsgContext); return (<> This is B component:::: {msg} </>) }
阅读全文
摘要：代码案例 function A({ onGetAName }) { const name = `> ${new Date().getTime()} <`; return ( <div> This is A component ! {/*箭头函数形式来调用事件函数*/} <button onClick
阅读全文
摘要：案例代码 const style = { active: { border: '1px solid red'; } } import {useState} from "react"; const tabs = [ { type: 'hot', text: '最热' }, { type: 'time'
阅读全文
摘要：React基础 组件内部状态 组件内部状态也称之为局部状态，允许保存、修改和删除存储在组件内部的属性 使用ES6类组件可以在构造函数种初始化组件的状态，构造函数只会在组件初始化的时候调用一次 const list = [ { title: 'React', url: 'https://faceboo
阅读全文
摘要：In brief > Foundation 1. Communication - Input - Output 2. Event handlers 3. Composition - Using React's children API - Passing a child as a prop - Hi
阅读全文
摘要：// ★ 最为推荐的一种创建ref的方式： createRef class ClassicalRef extends React.Component { /** * React.createRef调用后可以返回一个容器，这个容器可以存储被ref所标识的节点 * 该容器是专人专用的 * */ node
阅读全文
摘要：### 组件传值 ``` // 父组件 export default function Tab(props: any) { const [serverUrl, setServerUrl] = useState('https://'); console.log(props); // 父组件接受子组件的
阅读全文
摘要：import React, { Component } from 'react' import ReactDOM from 'react-dom/client' import { nanoid } from 'nanoid' const root = ReactDOM.createRoot(docu
阅读全文
摘要：// 导入React、React-DOM // React负责创建React元素 - 虚拟DOM // ReactDOM负责渲染React元素 // JSX - 插值表达式 // 表达式 // 1. 变量 // 2. 基本数据类型：string、number、boolean、undefined、nu
阅读全文
摘要：import './index.css' import avatar from './images/avatar.png' import React from 'react' import { v4 as uuid } from 'uuid' // 时间格式化 function formatDate
阅读全文
摘要：nanoid生成唯一ID uuid生成唯一ID nanoid VS uuid 参考连接：https://blog.csdn.net/Cr1556648487/article/details/127012165
阅读全文
