网站制作过程简介,wordpress 手机api接口,wordpress 首页位置,只有asp网站代码可以重新编译吗1.React Hooks
使用hooks理由
1. 高阶组件为了复用#xff0c;导致代码层级复杂
2. 生命周期的复杂
3. 写成functional组件,无状态组件 #xff0c;因为需要状态#xff0c;又改成了class,成本高 1.1 useState useState();括号里面处的是初始值#xff1b;返回的是一个…1.React Hooks
使用hooks理由
1. 高阶组件为了复用导致代码层级复杂
2. 生命周期的复杂
3. 写成functional组件,无状态组件 因为需要状态又改成了class,成本高 1.1 useState useState();括号里面处的是初始值返回的是一个数组【值改变值的唯一方法】 因此可以通过解构例如 const [name,setName] useState(www)
import React, { useState } from reactexport default function APP() {const [name,setName] useState(www)return (div{name}button onClick{(){setName(xxx);}}click/button/div)}只要使用setXX后函数式组件都会重新执行一次。类似setState()
重新执行时会保存name的状态。不会被重新赋值 比如 count从0 开始 点击一次1 再点击就是2,3,4,5。。。
而不是一直是0因为useState是一个记忆函数会记住状态。
而代码中的mycount会一直是0。 1.2 useEffect和useLayoutEffect
useEffect(处理副作用)和useLayoutEffect (同步执行副作用)
Function Component 不存在生命周期所以不要把 Class Component 的生命周期概念搬过来试图对号入座。 比如发请求那数据如果直接如下所写 axios发送请求获取数据成功后调用setlist()然后就会重新执行一次组件导致又调用anxios请求然后又setlist() 一直重复下去。
因此我们需要用到useEffect() 第2个参数传空数组就只会执行一次 import axios from axios
import React, { Component, useEffect, useState } from reactexport default function APP() {const [list,setList] useState([])useEffect((){axios.get(film.json).then(res{console.log(res);setList(res.data)})},[]) //传空数组 [依赖的状态空数组表示不依赖]return (div{list.map(itemli key{item.filmId}{item.name}/li)}/div)} 如果第2个参数传的不是空数组而是有依赖当依赖被改变就会执行
不要对 Dependencies 撒谎, 如果你明明使用了某个变量却没有申明在依赖中你等于向 React 撒了谎后果 就是当依赖的变量改变时useEffect 也不会再次执行, eslint会报警告。 例如将名字首字母改为大写 import React, { Component, useEffect, useState } from reactexport default function APP() {const [name,setName] useState(wuweiwei)useEffect((){setName(name.substring(0,1).toUpperCase()name.substring(1))},[])return (divapp{name}button onClick{(){setName(xiaoming)}}click/button/div)} 可以发现当点击按钮名字改变后并没有对名字进行首字母大写的修改。因为传的是空数组没有传入name依赖。即只要name值被改变useEffect第一个参数回调函数就会被执行。如果是相同的值就不会执行。 useEffect((){ setName(name.substring(0,1).toUpperCase()name.substring(1)) },[name]) 销毁时的回调函数
useEffect(() {return () {//组件被销毁时才会执行此回调函数};}, [依赖的状态;空数组,表示不依赖]) 注意 1.useEffect可以写多个 useEffect和useLayoutEffect有什么区别 简单来说就是调用时机不同 useLayoutEffect 和原来 componentDidMount componentDidUpdate 一致在 react完成DOM更新后马上同步调用的代码会阻塞页面渲染。而 useEffect 是会在整个页面渲染完才会调用的 代码。 官方建议优先使用 useEffect。 在实际使用时如果想避免页面抖动在 useEffect 里修改DOM很有可能出现的话可以把需要操作DOM的代码 放在 useLayoutEffect 里。在这里做点dom操作这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕 上只有一次回流、重绘的代价 1.3 useCallback 防止因为组件重新渲染导致方法被重新创建 起到缓存作用,可提高性能; 只有第二个参数 变化了才重新声明一次。 var handleClick useCallback((){console.log(name)},[name])button onClick{()handleClick()}hello/button//只有name改变后 这个函数才会重新声明一次//如果传入空数组 那么就是第一次创建后就被缓存 如果name后期改变了,拿到的还是老的name。//如果不传第二个参数每次都会重新声明一次拿到的就是最新的name. 1.4 useMemo 记忆组件 useCallback 的功能完全可以由 useMemo 所取代如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。
useCallback(fn, inputs) is equivalent to useMemo(() fn, inputs). 唯一的区别是useCallback 不会执行第一个参数函数而是将它返回给你而 useMemo 会执行第一个函数并 且将函数执行结果返回给你。所以在前面的例子中可以返回 handleClick 来达到存储函数的目的。 所以 useCallback 常用记忆事件函数生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数 计算得到一个确定的值比如记忆组件。 1.5 useRef
和React.createRef使用相同放在dom上得到的是dom对象放在组件上得到的是组件对象。
var mytextuseRef(0); //也带有记忆功能input ref{mytext}/mytext.current 1.6 useContext(减少组件层级) import React from react
var GlobalContext React.createContext()
// 注意此时的reduecer 返回值是一个对象 {isShow:false,list:[]}
function App(props) {let [state, dispatch] useReducer(reducer, { isShow: true, list: [] })return GlobalContext.Provider value{{dispatch}}div{state.isShow ?div 我是选项卡/div: null}{props.children}/div/GlobalContext.Provider
}
function Detail() {var { dispatch } useContext(GlobalContext)useEffect(() {//隐藏dispatch({type: Hide,payload: false})return () {//显示dispatch({type: Show,payload: true})};}, [])return divdetail/div
}1.7 useReducer 主要是将状态从组件中分离
import React, { Component } from react
import { useReducer } from react//处理函数
const reducer(prevState,action){console.log(进来了,prevState,action); //prevState是状态对象 action是dispatch中的对象let newState{...prevState}switch(action.type){case -:newState.count--return newStatecase :newState.countreturn newStatedefault:return prevState}}//外部的对象
const initialState{count:0,
}export default function App(){const [state,dispatch]useReducer(reducer,initialState) //参数1 处理函数 参数2初始的statereturn (divbutton onClick{(){dispatch({type:-})}}-/button{state.count}button onClick{(){dispatch({type:})}}/button/div)
} 过程使用const [a,b]useReducer参数1参数2 //参数1 处理函数 参数2初始的state
通过ab变量保存
然后组件内使用了b就会自动调用参数1的处理函数const reducer(prevState,action) //prevState是状态对象 action是dispatch中的对象
这里面return回去的state会自动到状态中。 1.8 自定义hooks 当我们想在两个函数之间共享逻辑时我们会把它提取到第三个函数中。 必须以“use”开头吗必须如此。这个约定非常重要。不遵循的话由于无法判断某个函数是否包含对其内部 Hook 的调用React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。
