其中最让我惊喜的就是 React Compiler 了。
众所周知,大家在介绍 React 的时候总会说它是一个重运行时的框架,因为它本身在编译时并不会做很多针对于渲染的优化动作。这让开发者在开发阶段拥有了很多的灵活性,React 给我们提供了诸如 useMemo/useCallback 这样的 API ,把运行时优化的手段交给到了开发者手上。但这同样也给开发者带来了极大的心智负担,
const Component = () => { const onSubmit = () => {}; const onMount = () => {}; useEffect(() => { onMount(); }, [onMount]); return <Form onSubmit={onSubmit} />; };在底层,它的行为就相当于 onSubmit 和 onMount 都被 useCallback 包裹上了,而 Form 被 React.memo 包裹上了:
const FormMemo = React.memo(Form); // 堆代码 duidaima.com const Component = () => { const onSubmit = useCallback(() => {}, []); const onMount = useCallback(() => {}, []); useEffect(() => { onMount(); }, [onMount]); return <FormMemo onSubmit={onSubmit} />; };当然,Compiler 实际做的事情要比这个 Demo 要复杂的多。当前的版本中,如果一个父组件重新渲染,那么在其内部渲染的每个组件也会重新渲染。
// 如果 Parent 重新渲染 const Parent = () => { // Child 也会重新渲染 return <Child />; };理想的状态是,只有当子组件的 props 改变时,子组件才会重新渲染。使用 React Compiler 时,一切都在底层进行了缓存,这个理想状态就变成了事实。
const Component = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button onClick={() => setIsOpen(true)}> open dialog </Button> {isOpen && <ModalDialog />} <VerySlowComponent /> </> ); };每次打开对话框时,VerySlowComponent 都会重新渲染,导致对话框打开时有延迟。如果我们把打开对话框的状态封装在一个组件中,像这样:
const ButtonWithDialog = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button onClick={() => setIsOpen(true)}> open dialog </Button> {isOpen && <ModalDialog />} </> ); }; const Component = () => { return ( <> <ButtonWithDialog /> <VerySlowComponent /> </> ); };我们基本上摆脱了 VerySlowComponent 不必要的重新渲染,而不用缓存任何东西。当 React Compiler 投入使用时,这些场景将不再对性能有任何影响,也不会再有任何重新渲染。自然的,之前一直在困扰大家的 useMemo 和 useCallback 将一去不复返了...
<Context.Provider> → 你只需使用 <Context>,而不再需要 <Context.Provider>,这将使 Context 的提供者更容易使用和管理。