自定义hooks

自定义传参hooks

把大多数的通用代码，或者props，抽成一个hooks，用hooks实现上下文，就不用再一一传参了

1. 实现原理，主要是通过createContext, useContext，生产-消费者模式。用于大量props一层一层传参。
   导入useContext，该函数接受createContext()的返回值，返回的结果为该context的当前值，当前的context值由上层组件中距离当前组件最近的<MyContext.Provider>的value props决定。
2. 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};

3. 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

1. hooks定义代码

import { useState, useEffect } from 'react';

function useTitle(initialTitle) {
  const [title, setTitle] = useState(initialTitle);
 
  useEffect(() => {
    document.title = title;
  }, [title]);

  return setTitle;
}

2. hooks使用代码

function Page() {
  const setTitle = useTitle('prev title');
 
  return (
    <Button onClick={() => setTitle('test title‘)}>
      Click me
    </Button>
  )
}