自定义 hook:
- 函数需要是 use 开头,否则react不认为是 hooks
- 自定义 hook 就是对状态和逻辑的封装,将来可以复用
import { useEffect, useState } from 'react'
export const useMouse = ()=>{
const [mouse, setMouse] = useState({x:0,y:0})
useEffect(()=>{
const hanlderMouse = (e)=>{
setMouse({
x:e.pageX,
y:e.pageY
})
}
window.addEventListener('mousemove',hanlderMouse)
return ()=>{
window.removeEventListener('mousemove',hanlderMouse)
}
},[])
return mouse
}
-----------------------------------------------------------
import React from 'react'
import {useMouse} from './hook'
const App = () => {
const mouse = useMouse()
return (
<div>
<div>app=={JSON.stringify(mouse)}</div>
</div>
)
}
export default App
useRef:使用useRef可以获取dom元素,组件也可以通过它获取。
import React,{useRef,useEffect} from 'react'
const App = () => {
const iptRef = useRef()
useEffect(() => {
iptRef.current.focus()
}, [])
const btnOk =()=>{
console.log(iptRef.current.value);
}
return (
<div>App
<input ref={iptRef} type='text'/>
<button onClick={btnOk}>获取内容</button>
</div>
)
}
export default App
useContext:基本使用(可以实现跨组件通讯)
- 通过createContext创建context对象
- 通过Provider组件包裹根组件,注入数据
- 在后代组件中使用useContext使用数据
import { createContext } from "react";
//创建上下文对象,并导出
const Context = createContext()
export default Context
//老语法使用<Context.Provider> 和 <Context.Consumer>
//使用Context.Provider 的 value属性来提供数据或方法给后代使用
return (
<Context.Provider value={count,setCount}>
<div className="app">
<h2>App === {count}</h2>
<hr />
<Child />
</div>
</Context.Provider>
)
/*原来的写法:
<Context.Consumer>
{
data=>{
return JSX片段(这里面使用data的数据)
}
}
</Context.Consumer>
data就是外面Provider上的value提供的数据
*/
//使用useContext来获取上下文对象里面的数据
const {count,setCount} = useContext(Context)
Redux:Redux 是 React 中最常用的状态管理工具
- action -> reducer -> store
- action(动作):描述要做的事情
- reducer(函数):更新状态
- store(仓库):整合 action 和 reducer
action:要做的事情
- 特点:{type:"事件名",payload:"数据"}
- action 就是一个对象,type 描述行为,约定 payload
action creator:(使用函数创建 action 对象)
// 2. 使用 Action Creator
const decrement = payload => {
return { type: 'decrement', payload }
}
- 使用 action creator 方式可以动态创建 action
- 使用函数来创建 action 可以动态传参
Redux-核心reducer:(reducer 是一个纯函数)
- 用来处理 action 并更新状态,是 Redux状态更新的地方
- 函数签名为:
(prevState,action) => newState
- 接收上一次的状态和 action 作为参数,根据 action 的类型,执行不同操作,最终返回新的状态
// state 上一次的状态
// action 当前要执行的动作
const reducer = (state, action) => {
switch (action.type) {
// 计数器增加
case 'increment':
// 返回新状态
// return state + 1
// 根据 action 中提供的 payload 来决定到底增加多少
return state + action.payload
// 注意:一定要有 default,如果将来 reducer 无法处理某个 action,
//就直接将上一次的状态返回即可
default:
return state
}
}
//导入子模块reducer函数
//合并成一个大的reducer函数
//combineReducer({模块名1:reducer函数1,模块名2:reducer函数2})
const reducer = combineReducer({
news,login
})
//创建仓库实例
const store = createStore(reducer)
//暴露仓库
export default store
Redux-核心store: ( store:仓库,Redux 的核心,整合 action 和 reducer )
// const store = createStore(reducer函数) 创建仓库实例对象
//store.getState() 获取数据
//store.dispatch(action) 分发任务
//store.subscribe(() => {}) 监听数据变化
import { createStore } from 'redux'
// 创建 store
// 参数为:reducer 函数
const store = createStore(reducer)
// 更新状态
// dispatch 派遣,派出。表示:分发一个 action,也就是发起状态更新
store.dispatch(action)
store.dispatch( increment(2) )
// 获取状态
const state = store.getState()
// 监听状态变化
const unSubscribe = store.subscribe(() => {
// 状态改变时,执行相应操作
// 比如,记录 redux 状态
console.log(store.getState())
})
只要创建store,Redux就会调用一次reducer,这一次就是初始化默认值。