**优化后**  优化思路：将使用了`state`的组件拆分为一个子组件，`state`在子组件中使用(将`state`下发到子组件)，`state`变化时仅当前组件重渲染。

// 优化后写法
const Component = () => {
return (

)
}
const ButtonWithDialog = () => {
const [isOpen, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(!isOpen)}>open
{ isOpen && }
</>
)
}

##### props.children 传递无状态组件这两个方法其实思路都是一样的，就是拆分受`state`影响的组件与不受`state`影响的组件。有时无法轻易的把一个组件单独的独立提取出来，此时可以把带状态的组件提取出来，然后把耗时的组件作为 `props .children` 传递。**优化前**

const FullComponent = () => {
const [state, setState] = useState(1);

const onClick = () => {
setState(state + 1);
};

return (

);
};

**优化后**  优化思路：父组件传递`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 (

);
};

##### props传递组件该方法与`props.children`本质是一样的，只不过有些时候如果无法通过`props.children`传递，可以将组件作为props的参数传递。**优化前**

const FullComponent = () => {
const [state, setState] = useState(1);

const onClick = () => {
setState(state + 1);
};

return (

);
};

**优化后**  优化思路：`props` 不受状态变化的影响，所以可以避免耗时组件的重复渲染。适用于耗时组件不受状态变化的影响，又不能作为 `children` 属性传递

const ComponentWithClick = ({ left, right }) => {
const [state, setState] = useState(1);

const onClick = () => {
setState(state + 1);
};

return (

);
};

// 把组件作为 props 传递给组件，这样耗时组件就不受点击事件的影响
const SplitComponent = () => {
const left = (
<>

component with slow components passed as props

Click the block - “slow” components will NOT re-render

</>
);
const right = ;
return (
<>

</>
);
};

#### React.memo缓存子组件与useCallback结合`React.memo`方法是一个高阶函数，参数是一个组件A，返回包装过的新组件B。  包装过的新组件B具有缓存功能，只有组件A的`props`发生变化，才会触发组件重新渲染。**注意点**  这里`props` 是浅比较，在将`对象`和`方法`作为 `props` 传递时必须考虑到引用地址的问题(如果地址变化，也会被认为`props`变化了)。### 最后四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~**篇幅有限，仅展示部分内容**![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)