hooks只能在函数式组件中使用
useState 基本使用-数字import React,{useState} from 'react'
function HooksTest() {
//num为变量，setNum是方法 形参参数为num值，return值为num新值
const [num,setNum] = useState(0)//0为默认值
return(
{num}
setNum((n)=>{
return n+1
})}>setNum
)
}
// 实现了点击按钮递增
import React,{useState} from 'react'
function HooksTest() {
const [obj,setNum] = useState({
num: 2,
id: 3
})
return(
{obj.num}
setNum((obj)=>{
return {...obj, num:obj.num+1}
})}>setNum
)
}
// 将对象解构，并且将需要改变的值放上去
用来践行Flux/Redux思想
一、创建初始值initialState
二、创建所有操作reducer(state, action);
三、传给userReducer，得到读和写API
四、调用写({type: ‘操作类型’})
总的来说，useReducer 是 useState 的复杂版
案例1-不改变objimport React,{useReducer} from 'react'
const obj = {
num: 2,
id: 3
}
const reducer = (state, action) => {
if (action.type === 'add'){
let num = obj.num+action.n
return {...obj, num }
}if (action.type === 'sub'){
let num = obj.num - action.n
return {...obj, num}
}else {
throw new Error("错误的类型")
}
}
function HooksTest() {
const [state, dispatch] = useReducer(reducer,obj);
const {num} = state
const onAdd = ()=>{
dispatch({
type: 'add',
n: 10
})
}
const onSub = ()=>{
dispatch({
type: 'sub',
n: 5
})
}
return(
{num}
add
sub
)
}
// 以上代码 点击add后num为12，点击sub之后num为-3，重复点击只计算一次，obj.num未发生改变
一、将数据集中在一个 store 对象
二、将所有操作集中在 reducer
三、创建一个 Context
四、创建对数据的读取 API
五、将第四步的内容放到第三步的 Context
六、用 Context.Provider 将 Context 提供给所有组件
七、各个组件用 useContext 获取读写API
import React, { useReducer, useContext, useEffect } from "react";
import ReactDOM from "react-dom";
import React, {useReducer, useContext, useEffect} from "react";
import ReactDOM from "react-dom";
const store = {
user: null,
books: []
};
function reducer(state, action) {
switch (action.type) {
case "setUser":
return {...state, user: action.user};
case "setBooks":
return {...state, books: action.books};
default:
throw new Error();
}
}
const Context = React.createContext(null);
export default function App() {
const [state, dispatch] = useReducer(reducer, store);
const data = {state, dispatch};
return (
);
}
function User() {
const {state, dispatch} = useContext(Context);
const getUser = () => {
dispatch({
type: "setUser", user: {
name: '零三',
id: 30
}
});
}
return (
个人信息
{state.user ? state.user.name : 获取信息}
);
}
function Books() {
const {state, dispatch} = useContext(Context);
const getBooks = () => {
dispatch({
type: "setBooks", books: [
{
name: 'java基础',
id: 1
}, {
name: 'JavaScript数据结构与算法',
id: 2
}
]
});
}
return (
我的书籍
{state.books.map(book => {book.name})}
{state.books.length === 0 && 获取书籍}
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
全局变量是全局的上下文
上下文是局部的全局变量
一、使用 C = createContext(initial) 创建上下文
二、使用 圈定作用域
三、在作用域内使用 useContext©来使用上下文
import React, { useContext, useState} from "react";
const Context = React.createContext(null);
export default function App() {
const [num, setNum] = useState(0)
return (
);
}
function Child() {
const {num, setNum} = useContext(Context)
return(
{num}
setNum((n)=>{
return n+1
})}>add
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
对环境的改变即为副作用，如修改 document.title
但我们不一定非要把副作用放在 useEffect 里面
实际上叫做 afterRender 更好，每次render后执行
一、作为 componentDidMount 使用，[ ] 作第二个参数
二、作为 componentDidUpdate 使用，可指定依赖
三、作为 componentWillUnmount 使用，通过 return
四、以上三种用途可同时存在
如果同时存在多个 useEffect， 会按照出现次序执行
function Child() {
const [num, setNum] = useState(10)
useEffect(()=>{
console.log('第一次渲染执行')
},[])
useEffect(()=>{
console.log('任何变化都会执行')
})
useEffect(()=>{
console.log('num变化执行', num)
}, [num])
return(
{num}
setNum((n)=>{
return n+1
})}>add
)
}
useEffect 在浏览器渲染完成后执行
useLayoutEffect 在浏览器渲染前执行
useLayoutEffect比useEffect先执行
为了用户体验，优先使用 useEffect (优先渲染)
export default function App() {
const [n, setN] = useState(1)
const time = useRef(null)
const onClick = () => {
setN(i => i + 1)
time.current = performance.now()
}
useLayoutEffect(() => {
if (time.current) {
console.log(performance.now() - time.current) //大概是0.9ms
}
})
useEffect(() => {
if (time.current) {
console.log(performance.now() - time.current) //大概是2.1ms
}
})
return (
n: {n}
Click
);
}
第一个参数是 () => value
第二个参数是依赖 [m, n]
只有当依赖变化时，才会计算出新的 value
如果依赖不变，那么就重用之前的 value
这不就是 Vue 2的 computed 吗？
注意： 如果你的 value 是一个函数，那么你就要写成useMemo(() => x => console.log(x)) 这是一个返回函数的函数 是不是很难用？于是就有了useCallback
要理解 React.useMemo 需要先讲 React.memo React默认有多余的render
function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};
return (
{/*点击button会重新执行Child组件*/}
update n {n}
{/* */}
);
}
function Child(props) {
console.log("child 执行了");
console.log('假设这里有大量代码')
return child: {props.data};
}
const Child2 = React.memo(Child);
将代码中的 Child 用React.memo(Child) 代替
如果 props 不变，就没有必要再次执行一个函数组件
最终代码：
function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};
return (
{/*点击button会重新执行Child组件*/}
update n {n}
);
}
const Child = React.memo(props => {
console.log("child 执行了");
console.log('假设这里有大量代码')
return child: {props.data};
});
- 但是 这玩意有一个bug
添加了监听函数之后，一秒破功因为 App 运行时，会再次执onClickChild，生成新的函数
新旧函数虽然功能一样，但是地址引用不一样！
function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};
const onClickChild = () => {}
return (
{/*点击button会重新执行Child组件*/}
update n {n}
{/*但是如果传了一个引用，则React.memo无效。因为引用是不相等的*/}
);
}
//使用React.memo可以解决重新执行Child组件的问题
const Child = React.memo(props => {
console.log("child 执行了");
console.log('假设这里有大量代码')
return child: {props.data};
});
怎么办？ 用useMemo：
function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};
const onClick1 = () => {
setM(m + 1);
};
const onClickChild = () => {}
const onClickChild1 = useMemo(() => {
return () => {
console.log(`on click child m: ${m}`)
}
}, [m])
return (
{/*点击button会重新执行Child组件*/}
update n {n}
update m {m}
{/*但是如果传了一个引用，则React.memo无效。因为引用是不相等的*/}
{/**/}
{/*onClickChild1使用useMemo可以消除此bug*/}
);
}
//使用React.memo可以解决重新执行Child组件的问题
const Child = React.memo(props => {
console.log("child 执行了");
console.log('假设这里有大量代码')
return child: {props.data};
});
useCallback(x => console.log(x), [m]) 等价于
useMemo( () => x => console.log(x), [m])
forwardRef- useRef 可以用来引用 DOM 对象
也可以用来引用普通对象
- forwardRef props 无法传递 ref 属性
function App(){
const buttonRef = useRef(null)
return (
按钮
{/* 控制台报错:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?
*/}
)
}
const Button = (props) => {
console.log(props) // {ref: undefined, children: "按钮"}
return
}
实现 ref 的传递：由于 props 不包含 ref，所以需要 forwardRef
import React, {forwardRef, useRef} from 'react';
function App(){
const buttonRef = useRef(null)
return (
按钮
)
}
const Button = forwardRef((props, ref) => {
console.log(ref) //可以拿到ref对button的引用，forwardRef仅限于函数组件，class 组件是默认可以使用 ref 的
return ;
})
