深圳cms建站系统_地推任务网_爱站网爱情电影网_5118网站查询

自定义Hook

作用：提取封装一些公共的处理逻辑
玩法：创建一个函数，名字需要是 useXxx ，后期就可以在组件中调用这个方法！

自定义Hook 1

页面加载的时候修改浏览器标签的名字。

const useDidMount = function useDidMount(title) {if (!title) title = 'React';// 基于React内置的Hook函数，实现需求即可useEffect(() => {document.title = title;}, []);
};

自定义Hook 2

由于useState 返回的 set修改状态方法只能“修改单一的数据”，可能会对其他数据造成影响，所以我们这里自定义一个Hook，在修改单一数据的同时，不对其他数据造成影响。

useA 是一个自定义 Hook，它的功能是管理一个对象类型的状态，并提供一个更新该状态的函数 setA。参数：

• val：这是 useA 接受的初始值，通常是一个对象，代表状态的初始值。

• useState(val)：它初始化状态 a，并返回一个数组，数组的第一个元素是当前的状态，第二个元素是更新该状态的函数（seta）。

• setA(partialState)：这个函数用来更新状态。它 接收一个部分状态（partialState），然后将其与当前状态合并 。这里使用了 ES6 的 … 扩展运算符，将当前状态 a 和部分更新的状态合并起来，确保只更新其中的某些字段，而不影响其他字段。

• 返回值：返回一个数组：第一个元素是当前的状态 a，第二个元素是更新该状态的函数 setA。

const useA = function (val) {const [a, seta] = useState(val);const setA = function setA(partialState) {seta({...a,...partialState})}return [a, setA]
}

使用

const Demo = function Demo() {let [state, setA] = useA({supNum: 10,oppNum: 5});const handle = (type) => {if (type === 'sup') {setA({supNum: state.supNum + 1});return;}setA({oppNum: state.oppNum + 1});};useDidMount('哈哈哈哈哈');return <div className="vote-box"><div className="main"><p>支持人数：{state.supNum}人</p><p>反对人数：{state.oppNum}人</p></div><div className="footer"><Button type="primary" onClick={handle.bind(null, 'sup')}>支持</Button><Button type="primary" danger onClick={handle.bind(null, 'opp')}>反对</Button></div></div>;
};

注意事项

下面写法就会报错，因为命名使用use开头，React会进行检验Hook函数的规则。

const Demo = function Demo() {if(1==1){useDidMount('哈哈哈哈哈');}
}

如果不使用use开头，就不会报错，但是我们一般封装自定义Hook，要遵守Hook函数的规则

const Demo = function Demo() {AAA ('哈哈哈哈哈');}