自定义传参hooks
把大多数的通用代码，或者props，抽成一个hooks，用hooks实现上下文，就不用再一一传参了
-
实现原理，主要是通过createContext, useContext，生产-消费者模式。用于大量props一层一层传参。
导入useContext，该函数接受createContext()的返回值，返回的结果为该context的当前值，当前的context值由上层组件中距离当前组件最近的<MyContext.Provider>的value props决定。
-
hooks实现代码。
import {createContext, useContex} from 'react';
const CanvasContext = createContext(null);
const CanvasProvider = ({children, setProps, setRootCustom, nodes, ...props}) => {
const selectoRef = useRef(null);
const movableRef = useRef(null);
const canvasRef = useRef(null);
const [targets, setTargets] = useState([]);
const [boundBool, setBoundBool] = useState(false);
return (
<CanvasContext.Provider
value={{
selectoRef,
movableRef,
canvasRef,
nodes,
targets,
boundBool,
setTargets,
setBoundBool,
...props,
}}
>
{children}
</CanvasContext.Provider>)
}
export {CanvasProvider, useCanvas: CanvasContext};
-
hooks使用代码。给父组件嵌套一层生产者组件，在里面的子组件里面直接使用hooks就可以
function DrawCanva(props) {
return (
<CanvasProvider {...{state, nodes, ...component}}>
<Canvas/>
</CanvasProvider>
)
}
function Canvas() {
const {state, targets, nodes, canvasRef, movableRef, setProps, rootCustom, setRootCustom} = useCanvas();
return (
<div>
你自己的代码
<ChidComponent />
</div>
)
}
const ChidComponent = () => {
const {state, targets, nodes, canvasRef, movableRef, setProps, rootCustom, setRootCustom} = useCanvas();
return (
<div>
你自己的代码
</div>
)
}
自定义控制浏览器标题hooks
用来控制浏览器标题，暴露设置标题的方法，设置标题之后，通过依赖更新标题
实现原理：保存标题的state
-
hooks定义代码
import { useState, useEffect } from 'react';
function useTitle(initialTitle) {
const [title, setTitle] = useState(initialTitle);
useEffect(() => {
document.title = title;
}, [title]);
return setTitle;
}
-
hooks使用代码
function Page() {
const setTitle = useTitle('prev title');
return (
<Button onClick={() => setTitle('test title‘)}>
Click me
</Button>
)
}
