react-redux用法以及Hooks API的使用

逃离我推掉我的手 2022-12-21 04:43 180阅读 0赞

## Hooks API ##

### useReducer用法： ###

`useReducer`是`useState`的替代方案。它接收一个形如：  
`(state, action) => newState 的 reducer`  
并返回当前的 state 以及与其配套的 dispatch 方法。  
**useReducer例子：**

import React, { useReducer, useLayoutEffect, useEffect} from "react"
    import { counterReducer} from "../store"
    const init = initArg => {  initArg + 1 }
    export default function HooksPage(props) { 
    const [state, dispatch] = useReducer(counterReducer, "0", init)
    useEffect(() => { 
     console.log("useEffect")
    });
    useLayoutEffect(() => { 
     console.log("useLayoutEffect")
    });
    return (
      <div>
    	<h3>HooksPage</h3>
    	<p>{ state}</p>
    	<button onClick={ () => dispatch({ type: "ADD"})}>add</button>
      </div>
    );
    }

**useEffect作用：**  
接收一个包含命令式、且可能有副作用代码的函数。  
在函数组件主体内`（这里指在 React 渲染阶段）`改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 `bug`并破坏 UI 的一致性。  
使用`useEffect`完成副作用操作。赋值给 `useEffect`的函数会在组件渲染到屏幕之后延迟执行。  
默认情况下，`effect`将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候 才执行  
**useLayoutEffect作用：**  
`useLayoutEffect`函数签名与`useEffect` 相同，但它会在所有的 DOM 变更之后同步调用 `effect`。可以使用它来读取`DOM`布局并同步触发重渲染。在浏览器执行绘制之前， `useLayoutEffect`内部的更新计划将被同步刷新。尽可能使用标准的 `useEffect` 以避免阻塞视觉更新。

## react-redux用法： ##

> 简介：每次都重新调用render和getState太low了，想更方便的实现功能我们可以使用react-redux

**react-redux提供了两个api:**

1.  **Provider 为后代组件提供store：**  
    `<Provider store>`使组件层级中的 `connect()` 方法都能够获得 `Redux store`。正常情况下，你的根组件应该嵌套在 中才能使用`connect()`方法。
2.  **connect 为组件提供数据和变更方法：**  
    `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`  
    连接 `Redux store` 与`React`组件。返回一个新的已与`Redux store`连接的组件类。  
    **参数:**  
    `mapStateToProps(state, [ownProps]): stateProps ] (Function):`  
    该回调函数必须返回一个纯对象，这个对象会与组件的`props`合并。  
    如果：定义该参数，组件将会监听`Redux store`的变化，否则 不监听。  
    `ownProps`是当前组件自身的`props`，如果指定了，那么只要组件接收到新的 `props`，  
    `mapStateToProps`就会被调用，`mapStateToProps`都会被重新计算， `mapDispatchToProps`也  
    会被调用。注意性能！  
    `mapDispatchToProps(dispatch, [ownProps]): dispatchProps ] (Object or Function):`  
    如果：你省略这个 mapDispatchToProps 参数，默认情况下， dispatch 会注入到你的组件 props中。  
    如果：传递的是一个对象，那么每个定义在该对象的函数都将被当作`Redux action creator`，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中 `dispatch`方法会将`action creator`的返回值作为参数执行。这些属性会被合并到组件的`props`中。  
    如果：传递的是一个函数，该函数将接收一个`dispatch`函数，然后由你来决定如何返回一个对  
    象。  
    `ownProps` 是当前组件自身的props，如果指定了，那么只要组件接收到新的 props，  
    `mapDispatchToProps`就会被调用。注意性能！  
    `mergeProps(stateProps, dispatchProps, ownProps): props ] (Function)`  
    如果指定了这个参数，`mapStateToProps()`与`mapDispatchToProps()`的执行结果和组件自身  
    的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件  
    中。你也许可以用这个回调函数，根据组件的 `props` 来筛选部分的`state` 数据，或者把 props 中  
    的某个特定变量与 `action creator`绑定在一起。如果你省略这个参数，默认情况下返回:`Object.assign({}, ownProps, stateProps, dispatchProps)`的结果。

\*\* react-redux例子：\*\*

//1. 全局提供store，index.js：
    import React from "react";
    import ReactDOM from "react-dom";
    import { Provider} from "react-redux";
    import App from "./App";
    import store from "./store/";
    // 把Provider放在根组件外层，使子组件能获得store
    ReactDOM.render(
      <Provider store={ store}> <App /> </Provider>,
      document.getElementById("root")
    );

//2. 页面获取状态数据，ReactReduxPage.js
    import React, {  Component } from "react";
    import {  connect } from "react-redux";
    
    class ReactReduxPage extends Component { 
     render() { 
      const {  num, add } = this.props;
      return (
    	<div>
    	<h1>ReactReduxData: { num}</h1>
    	<button onClick={ add}>add</button>
    	</div>
      );
     }
    }
    const mapStateToProps = state => {  num: state };
    const mapDispatchToProps = { 
      add: () => { 
         return {  type: "add" };
      },
    };
    //通过connect包装成高阶组件，目的：将State与Dispatch映射到组件的props上
    export default connect(
      mapStateToProps, //状态映射 mapStateToProps
      mapDispatchToProps, //派发事件映射
    )(ReactReduxPage);

为了简单易读也可以通过@connect()装饰器来实现：[@connect()装饰器配置方法][connect]

[connect]: https://blog.csdn.net/qq_41614928/article/details/109659862