课程进度 82% · 第17/20章第17/20章 · 标签 1/3
— 1 —
组件复用
高阶组件（HOC）：
jsx
1
// 高阶组件：接收一个组件，返回一个新组件
2
function withLogger(Wrapped) {
3
return function(props) {
4
React.useEffect(() => { console.log('渲染', props); });
5
return <Wrapped {...props} />;
6
};
7
}
8
const Hello = props => <h1>{props.msg}</h1>;
9
const LogHello = withLogger(Hello);
Render Props：
jsx
1
// Render Props：通过函数作为子组件传递数据
2
function Mouse({ children }) {
3
const [pos, setPos] = React.useState({x:0,y:0});
4
return <div onMouseMove={e => setPos({x:e.clientX,y:e.clientY})}>
5
{children(pos)}
6
</div>;
7
}
8
<Mouse>{pos => <span>{pos.x},{pos.y}</span>}</Mouse>
自定义Hook：
javascript
1
// 自定义Hook：封装可复用逻辑
2
function useCounter(init=0) {
3
const [n, setN] = React.useState(init);
4
const inc = () => setN(n+1);
5
return [n, inc];
6
}
7
function Demo() {
8
const [n, inc] = useCounter();
9
return <button onClick={inc}>{n}</button>;
10
}
— 2 —
性能优化
memo与useMemo：
jsx
1
// React.memo: 组件props不变时跳过渲染
2
const MemoComp = React.memo(function({ value }) {
3
return <div>{value}</div>;
4
});
5
// useMemo: 记忆计算结果，依赖n变化才重新计算
6
function Demo({ n }) {
7
const double = React.useMemo(() => n*2, [n]);
8
return <MemoComp value={double} />;
9
}
useCallback与懒加载：
jsx
1
// useCallback: 记忆函数，依赖不变时返回同一个函数
2
const Child = React.memo(({ onClick }) => <button onClick={onClick}>点我</button>);
3
function Demo() {
4
const [n, setN] = React.useState(0);
5
const handle = React.useCallback(() => setN(n+1), [n]);
6
return <Child onClick={handle} />;
7
}
8
// 懒加载组件：按需加载，提升首屏速度
9
const LazyComp = React.lazy(() => import('./Comp'));
10
<Suspense fallback={<div>加载中...</div>}>
11
<LazyComp />
12
</Suspense>
自定义HookmemouseReducer路由懒加载