React 文档整理

Main

组件

React.Component

生命周期

挂载

• constructor()

• static getDerivedStateFromProps()

• render()

• componentDidMount()

更新

• static getDerivedStateFromProps()

• shouldComponentUpdate()

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()

卸载

• componentWillUnmount()

错误处理

• static getDerivedStateFromError()

• componentDidCatch()

render()

1. render() 方法是 class 组件中唯一必须实现的方法。

2. 当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
• React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
• 数组或 fragments。 使得 render 方法可以返回多个元素。
• Portals。可以渲染子节点到不同的 DOM 子树中。
• 字符串或数值类型。它们在 DOM 中会被渲染为文本节点。
• 布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)

3. render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。

constructor(props)

1. 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

2. 通常，在 React 中，构造函数仅用于以下两种情况：
• 通过给 this.state 赋值对象来初始化内部 state。
• 为事件处理函数绑定实例

3. 在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state。

componentDidMount()

1. 这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅

2. 你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

componentDidUpdate(preProps,preState,sanpshot)

1. 当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

2. 你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，正如上述的例子那样进行处理，否则会导致死循环。

3. 如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

componentWillUnmount()

shouldComponentUpdate(nextProps,nextState)

1. 此方法仅作为性能优化的方式而存在。如果需要改写该生命周期时，应该考虑 React.PureComponet 。

2. shouldComponentUpdate() 返回 false，则不会调用 UNSAFE_componentWillUpdate()，render() 和 componentDidUpdate()。

static getDerivedStateFromProps()

getSnapshotBeforeUpdate(prevProps,preState)

static getDerivedStateFromError(error)

componentDidCatch(error,info)

1. error —— 抛出的错误。

2. info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。 componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况。

实例属性和方法

state

props

setState(updater[,callback])

1. setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式。

2. setState() 并不总是立即更新组件。它会批量推迟更新。在 setState() 后可能无法获取到更新后的值，如果需要在值更新后立即使用，可以使用 componentDidUpdate 生命周期或 setState 的回调函数中使用。如果要强制 DOM 更新同步，可以使用 flushSync 包装。

3. 除非 shouldComponentUpdate() 返回 false，否则 setState() 将始终执行重新渲染操作。

4. updater 可以是一个对象，也可以是一个函数 (state,props)=>newState ，对象或函数的返回值将会被浅合并（类似于 Object.assign()）到 state 中。

5. updater 函数中接收的 state 和 props 都保证为最新。

6. 如果在同一周期中对多个 setState 进行批处理，后续的 setState 将会覆盖之前的调用，值只会有一次改变。如果后续状态取决于当前状态，建议使用 updater 函数的形式代替。

this.setState({
	name: 'Simon'
})

this.setState((state,props)=>{
	offset: state.data.length  + props.pagesize
},() => {
	console.log(this,state.offset)
})

forceUpdate(callback)

1. 默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

2. 调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。

3. 通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

派生类属性

defaultProps

displayName

contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
// 添加组件属性
MyClass.contextType = MyContext;

使用

class MyComponent extends React.Component {
	timer = null;
	// render 之前调用
	constructor(props) {
		super(props);
		this.state = {
			name: 'Simon'
		}
	}
	// render之后 组件挂载之后，可以获取 DOM
	componentDidMount() {
		const main = document.querySelector('#main');
		this.timer = setInterval(()=>{},10000)
	}
	// props 或 sate 变化时，render 之前触发 返回一个布尔值决定组件是否重新渲染
	shouldComponentUpdate(nextProps,nextState) {

	}
	// 组件更新后调用，首次渲染时不会更新
	componentDidUpdate(preProps,preState) {

	}
	// 处理组件抛出错误，埋点或显示错误UI
	componentDidCatch(error,info) {
	}
	// 组件卸载前 清除监听，定时器
	componentWillUnmount() {
		clearInterval(this.timer)
	}

	render() {
		reutrn <div id="main">hello world</div>
	}
}

React.pureComponent

方法

React.memo(component[,areEqual])

1. 如果函数组件内部含有 useState， useReducer 或 useContext 等 Hook 时，仍会重新渲染。

2. 默认情况下 React.memo() 仅对 props 进行浅比较，如果需要进行深层比较或自行控制，需要传入一个自定义的 areEqual() 函数来实现。

createElement(type[,props,...children])

cloneElement(element[,config,...children])

<element.type {...element.props} {...props}>{children}</element.type>

isValidElement(object)

React.Children

React.Children.map(children,fuction([thisArg]))

React.Children.forEach(children,fuction([thisArg]))

React.Children.count(children)

React.Children.only(children)

React.Children.toArray(children)

React.Fragment

React.createRef()

React.forwardRef((props,ref)=>ReactNode)

• 转发 refs 到 DOM 组件

• 在高阶组件中转发 refs

React.lazy()

<React.Suspense fallback={<Loading/>}>

React.CreateContext()

React.createContext(default)

Context.Provider

class.contextType

Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

ReactDOM

1. createPortal()

createPortal(children,container[,key]);

const Component = () => {
	//...
	return (
		//...
		{ ReactDOM.createPortal(<div>我是弹窗</div>，document.body) }
		//...
		)
}

2. flushSync()

flushSync(() => {
	setCount(count + 1);
});
// 在这里 DOM 中的值已经更新

3. render()

render(element, container[, callback])

4.createRoot()

createRoot(container[, options]);

• onRecoverableError ：当React自动从错误中恢复时调用的可选回调。

• identifierPrefix：useId() 钩子的前缀，如果同时存在多个 root 的时候可以避免冲突。

import * as ReactDOM from 'react-dom/client';
import App from './APP.tsx';

const root = ReactDOM.createRoot(document.querySelector('#root));
root.render(<App/>)

root.unmount();

Hook

useState([initialState])

const [state, setState] = useState(initialState);

1. 如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。

2. initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。

3. 如果你更新 State Hook 后的 state 与当前的 state 相同时，React 将跳过子组件的渲染并且不会触发 effect 的执行。React 可能仍需要在跳过渲染前渲染该组件，不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。

4. 多个 setState 函数的更新会被合并为一次重新渲染。如果需要立即同步更新，则可以使用 flushSync(callback) 在 callback 中调用。

useEffect(didUpdate[,dependences])

1. 使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

2. 默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候 才执行。

清除副作用

useEffect(()=>{
	const timer = setInterval(()=>{],1000})
	return () => {
		clearInterval(timer)
	}
},[])

effect 的执行时机

1. 与 componentDidMount、componentDidUpdate 不同的是，传给 useEffect 的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。

2. 如果需要在浏览器完成布局与绘制之前执行，可以使用 useLayoutEffect Hook 来处理。

3. 而且当 state 被 flushSync 包装后更新时， 传递给 useEffect 的函数将在屏幕布局和绘制之前同步执行。

4. 即使在 useEffect 被推迟到浏览器绘制之后的情况下，它也能保证在任何新的渲染前启动。React 在开始新的更新前，总会先刷新之前的渲染的 effect。

effect 的条件执行

useContext(context)

const value = useContext(MyContext);

useReducer(reducer,initialArg,init)

const [state, dispatch] = useReducer(reducer, initialState, init);

惰性初始化

跳过 dispatch

useCallback(callback[,dependences])

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo(callback[,dependences])

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

1. 缓存一个高开销的计算结果。

2. 缓存一个字节点。

useRef(initialValue)

const refContainer = useRef(initialValue);

1. 最常见的用途是命令式地访问子组件。

2. useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。

3. 当 ref 对象内容发生变化时，useRef 并_不会_通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

useImperativeHandle(ref,createHandle[,deps])

useImperativeHandle(ref, createHandle, [deps])

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

useLayoutEffect

useDebugValue(value)

useDeferredValue(value)

useTransition

const [isPending, startTransition] = useTransition();
startTransition(() => {
  setCount(count + 1);
})

useId

const id = useId();

React 理念

纯函数

1. 当输入相同时，返回值永远相同

2. 纯函数没有副作用

高阶组件 HOC

render props

// 定义
const myRenderComponent = ({children}) => {
	const [state,setState] = useState();
	// 行为的抽象
	return (<div>
				{children(state)}
			</div>)
}

// 使用
const renderCustomer = () => {
	return (<div>
				<myRenderComponent>
					{state = > <AnotherComponent data={state}/> }
				</myRenderComponent>
			 </div>)
}

优化和自定义 Hook

usePrevious

type usePrevious = <T>(state:T)=> T | undefined;

const usePrevious:usePrevious = (state) => {
	const ref = useRef();

	useEffect(()=>{
		ref.current(state)
	},[state])

	return state.current
}

useStateCallback

type useStateCallback = <T>(initalValue?: T) =>
	[T,(...args:[T,(state:T) => unknown]) => never];
const useStateCallback:useStateCallback = (initalValue) => {
	const [state,setState] = useState(initalValue);
	const callback = useRef();
	useEffect(()=>{
		callback.current?.(state)
	},[state])

	return [state,(state,fn)=>{
		setState(state);
		callback.current = fn
	}]
}

拿到更新后的 state

避免不必要的组件更新

1. 使用 shouldComponentUpdate ，在这个声明周期中比对 props 和 state 并返回一个布尔值，如果返回 false 就会跳过 componentDidUpdate 和 render 。

2. 使用 Reac.PureComponent ，它实现了 shouldComponentUpdate 并在 props 和 state 未改变时跳过更新。

3. 使用 React.memo 包裹组件，它会比对 props ，当 props 相同时，就会跳过更新。

4. 使用 React.useMemo 缓存子组件，如果决定组件是否更新的依赖项数组没有改变，那么React.useMemo 会复用上一次返回的值。

惰性初始化高开销对象

function Image(props) {
  const ref = useRef(null);

  // ✅ IntersectionObserver 只会被惰性创建一次
  function getObserver() {
    if (ref.current === null) {
      ref.current = new IntersectionObserver(onIntersect);
    }
    return ref.current;
  }

  // 当你需要时，调用 getObserver()
  // ...
}

从 useCallback中读取经常变化的值

function Form() {
  const [text, updateText] = useState('');
  const textRef = useRef();

  useEffect(() => {
    textRef.current = text; // 把它写入 ref  });

  const handleSubmit = useCallback(() => {
    const currentText = textRef.current; // 从 ref 读取它    alert(currentText);
  }, [textRef]); // 不要像 [text] 那样重新创建 handleSubmit

  return (
    <>
      <input value={text} onChange={e => updateText(e.target.value)} />
      <ExpensiveTree onSubmit={handleSubmit} />
    </>
  );
}

function useEventCallback(fn, dependencies) {  const ref = useRef(() => {
    throw new Error('Cannot call an event handler while rendering.');
  });

  useEffect(() => {
    ref.current = fn;
  }, [fn, ...dependencies]);

  return useCallback(() => {
    const fn = ref.current;
    return fn();
  }, [ref]);
}

根据 state 的变化派生新的值

1. 使用 getDerivedStateFromProps 生命周期，在 render 前会执行并根据返回值来更新state。(不推荐)

2. 使用 pureComponent，并将需要派生的值放在 render 函数的函数体中。

3. 使用 useMemo 缓存高开销的值，或直接在函数式组件的函数体中运算。