context,redux的使用

1.Context的使用

import React, { Component, createContext, PureComponent } from "react";

const UserContext = createContext({
  name: "张三",
  age: 18,
});

const FnContext = createContext({
  sex: "男",
});

/* context在类组件的使用 */
class Child extends PureComponent {
  static contextType = UserContext;
  render() {
    return (
      <div style={{ borderBottom: "1px solid #e0e0e0" }}>
        <p>{this.context.name}</p>
        <p>{this.context.age}</p>
      </div>
    );
  }
}

/* context在函数组件的使用和嵌套 */
function FnChild() {
  return (
    <UserContext.Consumer>
      {(user) => {
        return (
          <div style={{ borderBottom: "1px solid #e0e0e0" }}>
            <p>{user.name}</p>
            <p>{user.age}</p>
            <FnContext.Consumer>{(fn) => <p>{fn.sex}</p>}</FnContext.Consumer>
          </div>
        );
      }}
    </UserContext.Consumer>
  );
}

export class TContext extends Component {
  render() {
    return (
      <>
        <h3>context的使用</h3>
        <hr />
        <UserContext.Provider value={{ name: "李四", age: 100 }}>
          <Child />
          <FnChild></FnChild>
        </UserContext.Provider>
        <Child />
        {/*当上级找不到context的时候，会使用默认值*/}
      </>
    );
  }
}

export default TContext;

2.Redux的使用

import React, { Component } from "react";
import { Button } from "antd";
import store from "./store";
import { countAction } from "./store/count";

export class TAntd extends Component {
  state = {
    count: store.getState().countInfo.count,
  };

  componentDidMount() {
    // 监听store的变化 进行通知 然后重新渲染页面
    this.unsubscribe = store.subscribe(() => {
      this.setState({
        count: store.getState().countInfo.count,
      });
    });
  }

  // 组件卸载要取消监听
  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    return (
      <div>
        <hr />
        <h4>antd的演练</h4>
        <Button type="primary">antd按钮</Button>
        <hr />
        <h4>redux的初试</h4>
        <p>{this.state.count}</p>
        <Button type="primary" onClick={() => this.changeCount(1)}>
          +1
        </Button>
        <Button type="primary" onClick={() => this.changeCount(-1)}>
          -1
        </Button>
        <Button type="primary" onClick={() => this.changeCount(5)}>
          +5
        </Button>
      </div>
    );
  }

  changeCount(number) {
    // 这里只是store的state的改变，但是页面没有渲染
    store.dispatch(countAction.changeMore(number));
  }
}

export default TAntd;

// store/count/index.js

import countReducer from "./reducer";
import * as countAction from "./action";
import * as countConst from "./constant";

export { countReducer, countAction, countConst };


// store/count/constant.js

export const CHANGENUMBER= "CHANGENUMBER";


// store/count/action.js

import { CHANGENUMBER } from "./constant";

export const changeMore = (number) => ({ type: CHANGENUMBER, number });


// store/count/reducer.js

import { CHANGENUMBER } from "./constant";

const countInfo = {
  count: 0,
};

// reducer是纯函数 结合state和action，返回新的state
function changeCounter(state = countInfo, action) {
  switch (action.type) {
    case CHANGENUMBER:
      return { ...state, count: state.count + action.number };
    default:
      return state;
  }
}

export default changeCounter;

// store/index.js

import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // 这个是redux devtools

// applyMiddleware使用中间件
const store = createStore(
  reducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;