网站说服力营销型网站策划 pdf,在线设计软件,价格查询,为什么wordpress主题访问很慢什么是hooks#xff1f; (coderwhy)
hooks是react 16.8#xff08;2019年#xff09;出的新特性。 react有两种形式来创建组件——类式和函数式。在hooks之前类式组件就是react最主流的编程方式。 这个时候#xff0c;函数式组件是非常鸡肋的#xff0c;几乎没什么用。因…什么是hooks (coderwhy)
hooks是react 16.82019年出的新特性。 react有两种形式来创建组件——类式和函数式。在hooks之前类式组件就是react最主流的编程方式。 这个时候函数式组件是非常鸡肋的几乎没什么用。因为函数式组件不能保存数据状态所以只能用于一些简单的展示的场景传什么数据就展示什么数据因为只有props是可以用的。并且函数组件是没有生命周期的。
但因为函数式编程的思想在前端是普遍流行和推崇的。我猜想react团队在设计函数式组件的时候肯定已经想到了这个问题。但可能当时没有想到合适方式实现函数式组件的完整功能。
对于开发者来说使用类式组件或者函数式组件来开发功能实际上都是无所谓谁好用就用谁。但设计者为了实现函数式组件可以说是绞尽脑汁。至于设计出来的东西好不好用另说。但函数式组件的这条路是一定要走下去的。
还有一个促使hooks诞生的原因是类式组件存在一些缺点。例如类式不好对功能进行拆分。当然hooks本身是否存在别的缺点我们另说。class概念难以理解以及this的指向问题处理对于初学者来说都是比较麻烦的。
1.hooks是完全可选的你不用hooks用类式组件也是完全没有问题的。 2.hooks是100%向后兼容的。hooks不包含任何破坏性改动。 3.hooks的代码比类组件相对少一些。
useState和useEffect的说明
你只要把这两个hooks学了已经可以应对90%的情况了因为这两个hooks可以处理state和生命周期问题。
useState的使用和使用规则
useState是一个hook但他和react的state本质是没什么关系的只是功能上是一样的——有一个地方能存储组件的数据。
基本使用
我们定义一个useState。数组的第一个参数是变量的名字第二个名字是用于修改变量的函数可以传一个初始值。
这是hooks的基本使用规则都是这样使用的。
要修改值我们直接调用自己定义的setCount把原来的count和num相加就实现了计算器的效果。
import { useState } from react;function App() {const [count, setCount] useState(0);function handleAdd(num) {setCount(count num);}return (div classNameAppdiv{count} button onClick{(e) handleAdd(1)}1/button/div/div);
}export default App;我们可以只写一个变量名不写set方法其实数组的两个变量就是变量的get和set方法。
import { useState } from react;
function App() {const [user] useState({ name: Tom, age: 18 });//const [user,setName] useState({ name: Tom, age: 18 });return (div classNameAppdiv{user.name user.age}/div/div);
}export default App;使用规则
不是所有的地方都可以使用hookshooks必须定义在函数顶层不能定义在if,for里面。官方就是这样规定的。
hooks简单原理
在函数组件执行完成后count变量已经被销毁了但是count的值被react保留了起来当页面再次渲染的时候会重新创建一个count变量并把原来的值赋值给新创建的这个count变量。
const [count, setCount] useState(0);useEffect的使用
什么是useEffect
effect的意思是影响效果效应。其实说简单点这个hooks就是用来监听useState的数据变化的。同时可以实现类似生命周期的效果但实际上生命周期效果只是useEffect的一个特性最直观的作用还是监听数据的变化。
useEffect基本使用
下面的代码实现一个计算器。
import { useEffect, useState } from react;function App(props) {const [count, setCount] useState(100);useEffect(() {console.log(count);});function handleAdd(num) {setCount(count num);}return (divApp:{count}button onClick{(e) handleAdd(1)}1/button/div);
}export default App;第一次页面渲染的时候useEffect里面的log输出了。 我们点击按钮做累加。useEffect回调函数被多次执行了。但这和count这个setState是没有关系的。也就是说只要页面重新渲染了useEffect就会重新执行。
啥那useEffect有什么用别着急下一小节你就明白了。
多个useEffect的使用和绑定setState变量
上面的例子可能挺让人困惑的到底是要干什么下面就来好好说说useEffect的本质是什么。看完这个小节就能很好理解useEffect是怎么用的了。
我们定义两个useState变量count和user。并且定义两个useEffect方便绑定这两个useState。 useEffect接收两个参数第一个参数就是我们前面用的回调函数第二个参数是一个数组里面放useState产生的变量放什么变量回调函数就只会在放的变量发生改变的时候回调。
import { useEffect, useState } from react;function App(props) {const [count, setCount] useState(100);const [user, setUser] useState({ name: Tom, age: 18 });useEffect(() {console.log(监听count: count);}, [count]);useEffect(() {console.log(监听user:, user);}, [user]);function handleAdd(num) {setCount(count num);}return (divApp:{count}button onClick{(e) handleAdd(1)}1/button/div);
}export default App;页面加载的时候我们可以看到两个useEffect输出下面的内容。 当点击1的时候count的useEffect回调函数执行了而user的useEffect回调函数没有执行。这说明在指定了第二个参数后useEffect的回调函数只会在第二个参数的值发生变化的时候才会回调。 假设写成下面这个样子那么在user或者count发生改变的时候回调函数会被执行。 useEffect(() {}, [user,count]);假如写成下面这个样子那么user,count发生变化这个函数都不会执行。也就是任何useState发生变化这个函数都不会回调。但是在第一次渲染的时候函数还是会回调的。 useEffect(() {}, []);假如写成下面这个样子也就是最开始的代码又是怎么回事呢 写成这样表示任何useState发生变化这个函数都会回调。 useEffect(() {});有什么不明白的请参考小结。
useEffect的返回值
返回值是一个回调函数这个函数在组件被销毁或者监听的数据更新的时候回调。 useEffect(() {return (){}});实用技巧一 充当componentDidMount和componentWillUnmount
首先我们第二个参数写空数组这样任何useState的更新都不会触发这个useEffect。但是在组件第一次渲染和销毁的时候会分别执行下面两个位置的代码也就正好和componentDidMount和componentWillUnmount这两个生命周期的执行时机是一样的。
这是useEffect的使用技巧react作者是否有意这样设计我也不是很清楚。 useEffect(() {//这里相当于componentDidMountreturn (){//这里相当于componentWillUnmount}}, []);实用技巧二 充当componentDidUpdate
因为没有填第二个参数所以在有任何数据更新的时候都会触发这个方法相当于是componentDidUpdate生命周期 useEffect(() {//有数据更新的时候触发});小结
1.useEffect主要目的是监听useState数据的变化。 2.useEffect充当生命周期只是他的附加功能。
useContext的使用掌握
定义两个Context。
import { createContext } from react;const ThemeContext createContext();
const UserContext createContext();export { ThemeContext, UserContext };使用context并给初始值。
root.render(// React.StrictModeUserContext.Provider value{{ name: Tom, age: 18 }}ThemeContext.Provider value{{ color: red, fontSize: 18 }}App //ThemeContext.Provider/UserContext.Provider// /React.StrictMode
);通过useContext直接获取到context的值就可以直接使用了。 如果不用useContext你就要使用xxxContext.Consumer来使用多个context的时候还要嵌套。这里就体现了hooks的一个优点。
import { useContext } from react;
import { ThemeContext, UserContext } from ./context;function App(props) {const user useContext(UserContext);const theme useContext(ThemeContext);return (divApp:divuser:{user.name user.age}/divdiv style{{ color: theme.color, fontSize: theme.fontSize }}theme/div/div);
}
export default App;useReducer的使用了解
这个东西在数据比较复杂的时候有点用处但本身用法也复杂。不推荐使用。有用到再说。
useCallback和useMemo的使用
这两个hooks是用来做性能优化的。
useCallback的使用
在将一个函数传递给子组件的时候用useCallback做性能优化。
useRef的使用
和类组件的createRef是非常类似的只是我们用useRef。
在函数组件里面ref返回的值始终是同一个对象。
import { memo, useRef } from react;const App memo((props) {const refBtn useRef();const refInput useRef();function handleClick() {//获取到组件自身console.log(refBtn.current);//获取input焦点refInput.current.focus();}return (divAppbutton ref{refBtn} onClick{handleClick}点击/buttoninput ref{refInput}/input/div);
});
export default App;自定义hooks
自定义hook监听生命周期
其实就是把useEffect封装了一下这样就可以监听组件的创建和销毁了。
function useLogLife(name ) {useEffect(() {console.log(name, 组件被创建了);return () {console.log(name, 组件被销毁了);};}, []);
}这个例子可以在show变化的时候创建和销毁About和Home组件。
import { memo, useEffect, useState } from react;function useLogLife(name ) {useEffect(() {console.log(name, 组件被创建了);return () {console.log(name, 组件被销毁了);};}, []);
}const About memo((props) {useLogLife(about);return divAbout/div;
});const Home memo((props) {useLogLife(home);return divHome/div;
});const App memo((props) {useLogLife(app);const [show, setShow] useState(false);return (divApp Component{show ? Home / : }{!show ? About / : }button onClick{(e) setShow(!show)}点击/button/div);
});
export default App;获取context
首先我们定义context,和原来没什么区别。
import { createContext } from react;const UserContext createContext();
const TokenContext createContext();export { UserContext, TokenContext };提供初始数据
import React from react;
import ReactDOM from react-dom/client;
import App from ./自定义hook获取context/App;
import { TokenContext, UserContext } from ./自定义hook获取context/context;const root ReactDOM.createRoot(document.getElementById(root));root.render(// React.StrictModeUserContext.Provider value{{ name: Tom, age: 18 }}TokenContext.Provider value{this_is_token}App //TokenContext.Provider/UserContext.Provider// /React.StrictMode
);我们自定义一个useUserToken把UserContext和TokenContext通过useContext套一层这样我们就不需要使用consumer了。
import { useContext } from react;
import { TokenContext, UserContext } from .;
function useUserToken() {const user useContext(UserContext);const token useContext(TokenContext);return [user, token];
}
export default useUserToken;最后我们只需要使用我们自定义的useUserToken就可以同时获取到user和token的数据了。
import { memo } from react;
import useUserToken from ./context/useUserToken;const Home memo((props) {const [user, token] useUserToken();return divHome: {user.name token}/div;
});const About memo((props) {const [user, token] useUserToken();return divAbout: {user.name token}/div;
});const App memo((props) {const [user, token] useUserToken();return (divApp: {user.name token}Home /About //div);
});
export default App;监听窗口滚动位置
定义一个下面这样的useEffect在组件里面直接调用window.scrollX window.screenY就可以直接用了。 useEffect(() {function handleScroll(event) {console.log(window.screenX, window.screenY);}window.addEventListener(scroll, handleScroll);return () {window.removeEventListener(scroll, handleScroll);};}, []);我们自定义一个hook封装一下。
import { useEffect, useState } from react;
function useScrollPosition() {const [scrollX, setScrollX] useState(0);const [scrollY, setScrollY] useState(0);useEffect(() {function handleScroll(event) {console.log(window.screenX, window.screenY);setScrollX(window.scrollX);setScrollY(window.scrollY);}window.addEventListener(scroll, handleScroll);return () {window.removeEventListener(scroll, handleScroll);};}, []);return [scrollX, scrollY];
}export default useScrollPosition;这样就可以在多个组件里面快速使用了。
import { memo, useEffect } from react;
import ./style.css;
import useScrollPosition from ./hooks/useScrollPosition;const Home memo((props) {const [scrollX, scrollY] useScrollPosition();return divHome:{scrollY} /div;
});const About memo((props) {const [scrollX, scrollY] useScrollPosition();return divAbout:{scrollY} /div;
});const App memo((props) {const [scrollX, scrollY] useScrollPosition();return (div classNamepageApp:{scrollY}Home /About //div);
});
export default App;style.css
.page {height: 2000px;
}页面滚动的时候多个组件都可以获取到坐标了。
storage
