宠物网站设计案例,网络系统设计的步骤,沈阳网站制作系统,临沂城乡建设管理局网站1.Class组件的优缺点
优点
class组件可以定义自己的state#xff0c;用来保存组件自己内部的状态#xff1b;函数式组件不可以#xff0c;因为函数每次调用都会产生新的临时变量#xff1b;class组件有自己的生命周期#xff0c;我们可以在对应的生命周期中完成自己的逻…1.Class组件的优缺点
优点
class组件可以定义自己的state用来保存组件自己内部的状态函数式组件不可以因为函数每次调用都会产生新的临时变量class组件有自己的生命周期我们可以在对应的生命周期中完成自己的逻辑 比如在componentDidMount中发送网络请求并且该生命周期函数只会执行一次 函数式组件在学习hooks之前如果在函数中发送网络请求意味着每次重新渲染都会重新发送一次网络请求class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等 函数式组件在重新渲染时整个函数都会被执行似乎没有什么地方可以只让它们调用一次
缺点
复杂组件变得难以理解难以理解的class组件复用状态很难 高阶组件redux中connect或者react-router中的withRouter于Provider、Consumer来共享一些状态
hooks
简单总结一下hooks 它可以让我们在不编写class的情况下使用state以及其他的React特性但是我们可以由此延伸出非常多的用法来让我们前面所提到的问题得到解决 Hook的使用场景 Hook的出现基本可以代替我们之前所有使用class组件的地方Hook只能在函数组件中使用不能在类组件或者函数组件之外的地方使用
2. 常用hooks 2.1useState保存状态
const [msg, setMsg] useState(hello hooks);2.2useEffect副作用
useEffect(() {// 执行return () {// 取消}
}, [//依赖项])2.3useContext(XXXContext)接获取某个Context的值
// context.js
import { createContext } from react;const UserContext createContext();
const ThemeContext createContext();export default {
UserContext, ThemeContext
}// App.jsx
UserContext.Provider value{{name: xiaoming, age: 18}}ThemeContext.Provider value{{color: red, size: 12}}App/ThemeContext.Provider
/UserContext.Provider// Function Comp
export default () {const USER useContext(UserContext);const THEME useContext(ThemeContext);return (h2{USER.name}-{USER.age}/h2h3 style{{color: THEME.color, size: THEME.size}}content/h3/)
}2.4userReducer()管理负责数据 useState的替代品而非redux的替代品
// const [state, dispatch] userReducer(reducer, initState);import React, { memo, userReducer } from react;function reducer(state, action){switch(action.type){case add:return {...state, counter: state.counter action.payload};case sub:return {...state, counter: state.counter - action.payload};default:return state;}
}export default memo(() {const [state, dipatch] useReducer(reducer, {counter: 0});return h2counter: {state.counter}/h2button onClick{() dispatch({type: add, payload: 5})}5/buttonbutton onClick{() dispatch({type: sub, payload: 5})}-5/button/
})2.5 性能优化useCallback记忆化回调函数useMemo
useCallback会返回一个函数的 memoized记忆的 值在依赖不变的情况下多次定义的时候返回的值是相同的
作为参数传递给子组件时使用;
const fn useCallback(() {dosomething(a, b);
}, [a, b]);配合useRef使用;
const [count, setCount] useState();
const countRef useRef();
countRef.current count;
const addFn useCallback(() setCount(countRef.current 1), []);useMemo(() {}, [dep])对回调函数的结果进行缓存
useCallback(fn,[dep]) useMemo(() fn, [dep])
- 进行大量的计算操作是否有必须要每次渲染时都重新计算
- 对子组件传递相同内容的对象时使用useMemo进行性能的优化2.6 useRef返回一个ref对象返回的ref对象再组件的整个生命周期保持不变。 用于获取dom元素用于保存具体的值解决闭包陷阱 2.7 useImperativeHandle子组件向父组件传递特定的对象 const SonComponent memo(forwardRef((props, ref) {const inputRef useRef();useImperativeHandle(() {return {focus(){inputRef.current.focus();}setValue(val){inputRef.current.value val;}} //返回的这个对象会被绑定到ref.current})return (h2son componenth2input ref{inputRef}//)
}))const FatherComponent memo(() {const sonRef useRef();return (h1father comp/h1SonComponent ref{sonRef} //)
})2.8 useLayoutEffect() useEffect会在渲染的内容更新到DOM上后执行不会阻塞DOM的更新useLayoutEffect会在渲染的内容更新到DOM上之前执行会阻塞DOM的更新
3. 自定义hook
形如useFn内部可以使用其他hook
// 获取滚动位置
export function useWindomPosition(){const [position, setPosition] useState();const handleScroll () {setPosition(window.scrollY);}useEffect(() {document.addEventListener(scroll, handleScroll);return () {document.removeEventListener(scroll, handleScroll);}})return position;
}// 使用localStorage存储数据
export function useLocalStorage(key){const [data, setData] useState(() JSON.parse(window.localStorage.getItem(key)));useEffect(() {window.localStorage.setItem(key, data);}, [data]);return [data, setData];
}4.其他hook
useSelector将state映射到组件中;useDispatch直接获取dispatch函数;useStore获取store对象 参数一将state映射到需要的数据中参数二可以进行比较来决定是否组件重新渲染。如果state中的a发生变化某个组件只用了state中的b也会重新渲染所以需要第二个参数优化。
// 1.获取state
import { useSelector, useDispatch, shallowEqual } from react-redux;
const { count } useSelector((state) {return {count: state.counter.count}
},shallowEqual)
useId用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。 useId是用于react的同构应用开发的前端的SPA页面并不需要使用它useId可以保证应用程序在客户端和服务器端生成唯一的ID这样可以有效的避免通过一些手段生成的id不一致造成 hydration mismatch useTransition返回一个状态值表示过渡任务的等待状态以及一个启动该过渡任务的函数。告诉react对于某部分任务的更新优先级较低可以稍后进行更新。useDeferredValue接受一个值并返回该值的新副本该副本将推迟到更紧急地更新之后。
