react 父子组件的渲染机制 |
您所在的位置：网站首页 › react自定义组件封装后渲染机制 › react 父子组件的渲染机制 |
|
文章目录
父子组件的渲染机制优化手段与实践写法父组件：下发stateprops.children 传递无状态组件props传递组件
Reacmo缓存子组件与useCallback结合
父子组件的渲染机制
渲染分初次渲染和重新渲染 React组件会在两种情况下发生重新渲染 当组件自身的state发生变化当组件的父组件重新渲染 当一个父组件被触发渲染时，其所有子组件都会重新渲染(子组件的子组件也会)。但有些场景下我们并不希望所有的子组件都重新渲染，比如在一个列表中，我们只希望重新渲染单击受新选择影响的这项。 优化手段与实践写法文章1:：https://juejin.cn/post/7251861916146417723 父组件：下发state在一个组件中，一部分组件使用了 state ,而另一部分组件和 state 相对孤立，此时可以将使用的了state的组件拆分为子组件。 优化前 // 优化前写法 const Component = () => { const [isOpen, setOpen] = useState(false) return ( setOpen(!isOpen)}>open { isOpen && } {/* 状态的变化会引起 SlowComponent 重复渲染 */} ) }优化后 优化思路：将使用了state的组件拆分为一个子组件，state在子组件中使用(将state下发到子组件)，state变化时仅当前组件重渲染。 // 优化后写法 const Component = () => { return ( ) } const ButtonWithDialog = () => { const [isOpen, setOpen] = useState(false) return ( setOpen(!isOpen)}>open { isOpen && } ) } props.children 传递无状态组件这两个方法其实思路都是一样的，就是拆分受state影响的组件与不受state影响的组件。 有时无法轻易的把一个组件单独的独立提取出来，此时可以把带状态的组件提取出来，然后把耗时的组件作为 props .children 传递。 优化前 const FullComponent = () => { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); }; return ( Click this component - "slow" component will re-render Re-render count: {state} ); };优化后 优化思路：父组件传递props对于引用类型来说其实传递是地址，也就是在子组件中使用props引用类型其实是使用的地址值。执行父组件的render的时候，比较发现props.children的引用地址没变化。 本方法与组件形式引用的区别：组件重新渲染其实是执行render方法， 如果子组件采用组件形式引入(可以理解为这里引入的是子组件render方法的执行结果。） 每次父组件重新渲染都会执行子组件的render方法获取新的执行结果。 const SplitComponent = () => { return ( Click the block - "slow" component will NOT re-render ); }; const ComponentWithClick = ({ children }) => { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); }; return ( Re-render count: {state} {children} ); }; props传递组件该方法与props.children本质是一样的，只不过有些时候如果无法通过props.children传递，可以将组件作为props的参数传递。 优化前 const FullComponent = () => { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); }; return ( Click this component - "slow" component will re-render Re-render count: {state} Something ); };优化后 优化思路：props 不受状态变化的影响，所以可以避免耗时组件的重复渲染。适用于耗时组件不受状态变化的影响，又不能作为 children 属性传递 const ComponentWithClick = ({ left, right }) => { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); }; return ( Re-render count: {state} {left} Something {right} ); }; // 把组件作为 props 传递给组件，这样耗时组件就不受点击事件的影响 const SplitComponent = () => { const left = ( component with slow components passed as props Click the block - "slow" components will NOT re-render ); const right = ; return ( ); }; Reacmo缓存子组件与useCallback结合Reacmo方法是一个高阶函数，参数是一个组件A，返回包装过的新组件B。 包装过的新组件B具有缓存功能，只有组件A的props发生变化，才会触发组件重新渲染。 注意点 这里props 是浅比较，在将对象和方法作为 props 传递时必须考虑到引用地址的问题(如果地址变化，也会被认为props变化了)。 解决办法 在父组件中，对于需要传递给子组件的引用类型 使用useCallback缓存函数使用useMemo缓存函数返回的结果(本场景的作用是缓存对象)比如选中的子组件高亮，父组件维护一个选中子组件的activeId。 优化前写法：在子组件中对比当前Id是否与activeId一致。 点击子组件时，activeId一直变化，所以每个子组件的props会变化。 const children=({activeId,id})=>{ const isActive = activeId===id; return ( ) }优化后写法 思路：缓存子组件，当props变化时才渲染。在父组件判断当前子组件是否选中的，如果选中传递className(这里可以自定义props，传递什么都行)。这样的好处是className变化的子组件才会重新渲染。 // 在父组件中使用子组件 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |