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

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()装饰器配置方法