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