Hook--3.Redux、useReducer、props.children、自定义hook

最新推荐文章于 2023-04-05 14:06:01 发布

爱喝珍珠奶茶

最新推荐文章于 2023-04-05 14:06:01 发布

阅读量598

点赞数

分类专栏： hook 文章标签： react.js

本文链接：https://blog.csdn.net/m0_63774574/article/details/127362996

版权

hook 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.Redux

该模块需要安装：npm i redux --save

Redux的定义：

将一个web应用拆分成视图层与数据层, Redux就是保存其数据的一个容器, 其本质就是维护一个存储数据的对象。

（1）state用于提供为仓库提供数据源，需要给定一个初始值；

（2）action用于对state 进行更新处理，表示要执行的动作，通过dispatch(action)触发；action被传递到reducer内部来处理，action中必须有一个type字段
  const reducer = (state=defaultState) => {
      //action……
      return state;    //必须返回处理后的state
  }
  export default reducer;

Redux基本原则：单一数据源；state是只读的；使用纯函数来执行修改；

Redux核心API：

        createStore(reducer)：创建数据仓库: import {createStore} from "redux"；

        store.getState()：用于获取store里面的数据；

        store.dispatch(action)：用于派发action，触发reducer,执行修改动作；

        store.subscribe(componentMethods)：订阅store的修改，只要store发生改变，组件中的回调函数就会被执行；

（1.1）数据的修改和订阅

（1）在组件内部定义要执行的动作action，并触发该动作dispatch。action中type字段是必须的，值通常大写：
addValue() {
	const action = {
            type: "ADD",  //值要大写
            data: "测试数据"
    }
    store.dispatch(action);
}
（2）接收动作并修改数据：通过dispatch触发动作后，会将action传递到reducer函数的第二个参数中

（3）组件中及时响应更新的数据：订阅

（4）subscribe函数可以监听Redux中state的变化，一旦Redux中的state发生了变化，render函数就会被调用，页面就会被重新渲染。

2.useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init?)

useReducer:返回的dispatch函数是用来触发某些改变state的action而不是直接设置state的值

useReducer接收的三个参数分别是：
（1）reducer: 这是一个函数，它的签名是(currentState, action) => newState，从它的函数签名可以看出它会接收当前的state和当前dispatch的action为参数，然后返回下一个state,也就是说它负责状态转换的工作。
（2）initialArg：如果调用者没有提供第三个init参数，这个参数代表的是这个reducer的初始状态，如果init参数有被指定的话，initialArg会被作为参数传进init函数来生成初始状态。（3）init: 这是一个用来生成初始状态的函数，它的函数签名是(initialArg) => initialState，从它的函数签名可以看出它会接收useReducer的第二个参数initialArg作为参数，并生成一个初始状态initialState

（1）useReducer的作用：“勾住”某些自定义数据对应的dispatch所引发的数据更改事件。useReducer可以替代useState，实现更为复杂逻辑的数据修改。

（2）解决什么问题：useReducer是useState的升级版，可以实现复杂逻辑修改，而不是像useState那样只是直接赋值修改。

useReducer的使用案例如下：

import React, { useReducer } from 'react'

export default function App() {
    const [state, dispatch] = useReducer((state, action) => {
        if(action === 'add') {
            return state+1
        }
        return state
    }, 0)
    return (
        <div>App
            <h1>{state}</h1>
            <button onClick={() => dispatch('add')}>+1</button>
        </div>
    )
}

（2.1）useReducer的使用场景

如果说你的state是一个数组或者是对象
如果你的state变化很复杂,经常一个操作需要修改很多的state
如果你的应用比较大,希望UI和业务能够分开维护的时候

3.`props.children`

props 是 React 组件的输入。它们是从父组件向下传递给子组件的数据。props 是只读的。

想要修改某些值，以响应用户输入或网络响应，请使用 state 来作为替代。

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。
<Welcome>Hello world!</Welcome>
在组件中获取props.children
function Welcome(props) {
  return <p>{props.children}</p>;
}
class 组件，请使用 this.props.children 来获取：
class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

4.自定义hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性

(4.1)自定义hook特性或约定

（1）自定义hook中可以调用其他hook

（2）必须以use开头，就像组件必须以大写字母开头一样

（3）自定义hook中管理state也是使用useState、useEffect，因为useState在调用的时候就是完全独立的

自定义hook示例如下：

import React, {useState} from 'react';
import useCounter from './useCounter'

export default function Counter(props) {
    const [count, setCount] = useCounter(0);  // 使用自定义hook
    const [big, setSize] = useState(true);
    const [type, setType] = useState("宽面");
    const size = (big)=>big? "大":"小";
    return (
        <div>
            <h3>面馆{props.shop}</h3>
            <h2>老板，来{count}碗{size(big)}碗{type}</h2>
            <button onClick={()=> setCount(count+1)} style={{"height":"40px"}}>加一碗</button>
            <button onClick={()=> setSize(!big)} style={{"height":"40px"}}>{size(!big)}碗</button>
            <button onClick={()=> setType("细面")} style={{"height":"40px"}}>不想吃宽面</button>
        </div>
    );
}