React入门六

自定义 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，这一次就是初始化默认值。