React component communication upgrade

Hello, I’m Cherry. The author is very dish, if have knowledge point to understand wrong place, ask each see an officer a lot to give advice. 💕 This week’s story is about communication between React components.

I. Component communication (Living Fossil Version)

Parent component: childContextType — defines the property to be passed; data type getChildContext() — Returns the object that is the property child of the context: ContextTypes — defines the property data type that the child component wants to call this.context — accesses the content of the parent component specified by contextTypes

class Complain extends React.Component {
  static contextTypes = {
    surface: PropTypes.string,
  };
  render() {
    return <div>{this.context.surface}</div>; }}class ComplainButton extends React.Component {
  static contextTypes = {
    realHeart: PropTypes.func,
  };
  render() {
    return (
      <>
        <button
          onClick={(ev)= >{this.context.realHeart(" How difficult! Learn sick ~ ~ ~ "); }} > Real thoughts</button>
      </>); }}export default class Father extends React.Component {
  static childContextTypes = {
    surface: PropTypes.string,
    realHeart: PropTypes.func,
  };
  getChildContext() {
    return {
      surface: this.state.surface,
      realHeart: this.realHeart,
    };
  }
  state = { surface: "Front end is very simple, come on!!" };
  realHeart = (myHeart) = > {
    this.setState({
      surface: myHeart,
    });
  };
  render() {
    return (
      <div>
        <h3>Complaints from xiao Bai</h3>
        <Complain />
        <ComplainButton />
      </div>); }}Copy the code

Two, component communication (antique version)

React. CreateContext — The React API parent component: ThemeContext.Provider — The parent component registers the content in the context of the child component: Themecontext.consumer — Child components consume (that is, get context content)

// Create a context object
let ThemeContext = React.createContext();
// This is the first way to call a subcomponent
class Complain extends React.Component {
  // Place the properties provided by the parent component in this.context
  static contextTypes = ThemeContext;
  render() {
    return <div>{this.context.surface}</div>; }}// This is the second way a child component can be called
class ComplainButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(context) => {
          return (
            <button
              onClick={(ev)= >{context.realHeart(" How difficult! Learn sick ~ ~ ~ "); }} > Real thoughts</button>
          );
        }}
      </ThemeContext.Consumer>); }}export default class Father extends React.Component {
  state = { surface: "Front end is very simple, come on!!" };
  realHeart = (myHeart) = > {
    this.setState({
      surface: myHeart,
    });
  };
  //value passes context information
  render() {
    return (
      <ThemeContext.Provider
        value={{
          surface: this.state.surface.realHeart: this.realHeart,}} >
        <h3>Complaints from xiao Bai</h3>
        <Complain />
        <ComplainButton />
      </ThemeContext.Provider>); }}Copy the code

Component communication (Redux version)

State — store the current state of the container action — dispatch the behavior object getState() — get the state of the container SUBSCRIBE ([methods]) — control the component to re-render (therefore, Reducer (State,action) — Manage all modified state operations Dispatch (action) — inform the Reducer of the modified state

class Complain extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ... props.store.getState(), }; }componentDidMount() {
    this.setState({ ... this.props.store.getState(), }); }render() {
    return <div>{this.state.surface}</div>; }}class ComplainButton extends React.Component {
  store = this.props.store;
  render() {
    return (
      <button
        onClick={(ev)= >{store. Dispatch ({type: "MY_HEART", surface: "How hard! Throw up ~~~",}); }} > Real thoughts</button>); }}export default class Father extends React.Component {
  render() {
    let store = this.props.store,
      { surface } = store.getState();
    return (
      <div>
        <h3>Complaints from xiao Bai</h3>
        <Complain store={store} />
        <ComplainButton store={store} />
      </div>); }}/ / index. Js calls
const reducer = function (
  state = {
    surface: "Front end is very simple, come on!!",
  },
  action
) {
  state = JSON.parse(JSON.stringify(state));
  let surface = action.surface;
  switch (action.type) {
    case "MY_HEART":
      state.surface = surface;
      break;
    default:
      break;
  }
  return state;
};
const store = createStore(reducer);
ReactDom.render(
  <>
    <Father store={store} />
  </>.document.getElementById("root"));Copy the code

4. Component Communication (React-Redux)

A Provider puts a store in a container into a context, Connect (1) assign state and action as properties to a component (2) include subsribe (3) Page render components return proxy components for Connect compared to Redux. The optimization points are as follows

/ / 1. The Provider
ReactDOM.render(<Provider store={store}>
    <Vote />
</Provider>.document.getElementById('root'));
/ / 2. The connect encapsulation
export default connect(state= >({... state.vote}), actions.vote)(Vote);//=> the first parameter gets the state information in the redux container and mounts it to the component property, using props (this.props. Father).
function mapStateToProps(state) {
    return {
        ...state.father
    };
}
//=> The second argument converts the actions method to the distributive format, which can be used to call the props method to complete the distributive task (this.props. MyHeart ()).
function mapDispatchToProps(){
    return {
        myHeart(){ dispatch(actions.father.myHeart()); }}}Copy the code

886~ see 🌼 next week