跳到主要内容

React

应用入口​

分类v18+v18-
CSR/客户端渲染createRoot() v18.0ReactDOM.render() v0.13
\-root.render(reactNode) v18.0同上
\-root.unmount() v18.0ReactDOM.unmountComponentAtNode() v0.13
\-hydrateRoot() v18.0ReactDOM.hydrate() v0.13

创建组件​

分类HooksClasses
创建函数组件React.Component v0.13
懒加载-React.lazy() v16.6
import() ES2020
异步读取值use() v19.0-
\-加载状态<Suspense> v18.0<React.Suspense> v16.6
\-TransitionuseTransition() v18.0React.startTransition() v18.0
\-延迟更新useDeferredValue() v18.0-
性能优化-React.PureComponent v15.3
\-记忆渲染结果useMemo() v16.8React.memo() v16.6
\-缓存函数useCallback() v16.8-
调试useDebugValue() v18.0static displayName

组件生命周期方法​

分类HooksClasses
挂载useState() v16.8constructor(props) v0.13
\--componentWillMount() v0.13
UNSAFE_componentWillMount() v16.3
\-useState(stateFromPropsFn)static getDerivedStateFromProps(props, state) v16.3
\-return ()render() v0.13
\-useEffect(()=>{},[]) v16.8componentDidMount() v0.13
更新-componentWillReceiveProps(nextProps) v0.13
UNSAFE_componentWillReceiveProps(nextProps, nextContext) v16.3
static getDerivedStateFromProps(props, state) v16.3
\-useMemo(()=>,['']) v16.8shouldComponentUpdate(nextProps, nextState, nextContext) v0.13
\--componentWillUpdate(nextProps, nextState) v0.13
UNSAFE_componentWillUpdate(nextProps, nextState) v16.3
\--render()
\-useLayoutEffect(setup, dependencies?) v16.8getSnapshotBeforeUpdate(prevProps, prevState) v16.3
\-useEffect(()=>{}, [''])componentDidUpdate(prevProps, prevState, snapshot?) v0.13
卸载useEffect(()=>{return ()=>{}}, [])componentWillUnmount() v0.13
错误边界react-error-boundarystatic getDerivedStateFromError(error) v16.6
\--componentDidCatch(error, info) v16.0

组件属性​

分类HooksClasses
属性声明及默认值props=default-valuestatic defaultProps v0.13/ES2022
属性类型及校验TypeScriptstatic propTypes v0.13/ES2022
读取属性值propsthis.props v0.13

组件状态​

分类HooksClasses
声明useState() v16.8state ES2022
读取-this.state v0.13
更新set v16.8this.setState(nextState, callback?) v0.13
\-useReducer() v16.8-
监听useEffect() v16.8-
\-useLayoutEffect() v16.8-
\-useEffectEvent()-
\-CSS-in-JSuseInsertionEffect() v18.0-

表单输入​

分类HooksClasses
表单<form> v19.0-
\-表单动作useActionState() v19.0-
\-乐观更新表单useOptimistic() v19.0-
\-表单状态useFormStatus() v19.0-
\-<input>-
\-<textarea>-
\-<select>-
\-<option>-
\-<progress>-

组件渲染​

分类HooksClasses
JSX<Fragment> / <></> v16.2React.Children v0.13
key v0.13
\--htmlFor v0.13
\--classname v0.13
\--dangerouslySetInnerHTML v0.13
渲染函数-createElement(type, props, ...children) v0.13
\--createFactory(type) v0.13
\--cloneElement(element, props, ...children) v0.13
\--isValidElement() v0.13
SSR/服务端渲染-ReactDOM.renderToString() v0.13
renderToString(reactNode, options?) v18.0
\--ReactDOM.renderToStaticMarkup() v0.13
renderToStaticMarkup(reactNode, options?) v18.0
\-Web Streams-renderToReadableStream(reactNode, options?) v18.0
\-Node.js Streams-renderToPipeableStream(reactNode, options?) v18.0
\--renderToStaticNodeStream(reactNode, options?) v18.0
\--ReactDOM.renderToNodeStream() v0.13
renderToNodeStream(reactNode, options?) v18.0
SSG/静态站点生成prerender() v19.0-
\-prerenderToNodeStream() v19.0-
HTML元数据<meta> v19.0-
\-<title> v19.0-
\-<script> v19.0-
预加载资源preinit() v19.0-
\-preload() v19.0-
\-prefetchDNS() v19.0-
\-preconnect() v19.0-
\-preinitModule() v19.0-
\-preloadModule() v19.0-
服务器组件cache() v19.0-

组件上下文​

分类HooksClasses
创建React.createContext() v16.3static childContextTypes v0.12/ES2022
getChildContext() v0.12
提供<SomeContext.Provider> v16.3static contextType v16.3/ES2022
static contextTypes v0.12/ES2022
读取和订阅useContext() v16.8
<SomeContext.Consumer> v16.3		this.context v0.12
调试-Context.displayName

DOM 实例​

分类HooksClasses
DOM 实例ref v0.13ref v0.13
\-获取useRef() v16.8React.createRef() v16.3
this.refs v0.13
\-立即更新-ReactDOM.flushSync() v0.13
\-强制重新渲染useSyncExternalStore() v18.0forceUpdate() v0.13
\-查找-ReactDOM.findDOMNode() v0.13
组件实例useImperativeHandle() v16.8React.forwardRef() v16.3
\-挂载-ReactDOM.createPortal() v16.0

组件样式​

分类HooksClasses
外联样式classname-
\-<link> v19.0-
行内样式style-
内联样式<style> v19.0-
CSS-in-JSuseInsertionEffect()-

异常处理​

分类HooksClasses
属性类型检查TypeScriptstatic propTypes v0.13/ES2022
错误边界react-error-boundarystatic getDerivedStateFromError(error) v16.6
\--componentDidCatch(error, info) v16.0
\--onCaughtError() v19.0
\--onUncaughtError() v19.0
\--onRecoverableError() v19.0
严格模式<StrictMode> v16.3-

性能优化​

分类HooksClasses
性能分析<Profiler> v16.9-
懒加载-React.lazy() v16.6
import() ES2020
记忆和缓存-React.PureComponent v15.3
\-记忆渲染结果useMemo() v16.8React.memo() v16.6
\-缓存函数useCallback() v16.8-
\--key v0.13
延迟更新useTransition() v18.0React.startTransition() v18.0
\-useDeferredValue() v18.0-
Effect 事件分离useEffectEvent()-
React 编译器React Compiler-