React way data transfer application

1. props property

React typical application, a top-down data (parent -> child) data sequence transmitted by props.

2. Context by value

1. scenario

For some applications, the properties of the global nature (such as UI themes, language, landing users, etc.), will be very tedious passing through props.

Context may appear (parent -> child) shared components among these properties.

2. Use

1. Create Context object (write a separate file)

const ThemeContext = React.createContext(defaultValue)

const ThemeContext = React.createContext({
    theme: themes.dark,
    changeTheme: () => {}
});

2. Provider provides the data, the data may be a primitive type, or may be an object;

It can be a constant or may be variable;

Note : If the object is, the value passed by state, or every time a new object is rendered.

      <ThemeContext.Provider value={this.state}>
        <Toolbar />
      </ThemeContext.Provider>

3. Consumer obtain data

      <ThemeContext.Consumer>
        {({theme, changeTheme}) => <div style={{background: theme.backgroundColor}}>
          <button onClick={changeTheme}>切换主题</button>
        </div>}       
      </ThemeContext.Consumer>

4 may be acquired by the evaluation value obtained by the static properties this.context contextType

  static contextType = ThemeContext;
  render() {
    return (
      <div style={{background: this.context.theme.backgroundColor}}>
        <button onClick={this.context.changeTheme}>切换主题</button>
      </div>

3. Refs forward

The ref automatically transferred to the assembly by the subassembly. DOM subassembly is then acquired by the ref.

1. scenario

For those high-reusable, such as <Button> <SelectInput> and other "Leaf" component, often need to obtain

DOM node, and achieve management focus, select, implement animation.

Note : Advanced component can not be forwarded by property ref

2. Use

1. Ordinary forwarding

{React.Component the extends the App class 
  constructor (The props) { 
    Super (The props); 
    the this .ref React.createRef = (); // initialize a variable 
  } 
  componentDidMount () { 
    the console.log ( the this .ref.current); // <div ID = "Toolbar"> Toolbar </ div> 
  } 
  the render () { 
    return (
       <div> 
        <REF = {Toolbar the this .ref} /> 
        <div> the App </ div>         
      </ div>     ) 
  } 
} / / after transfer to the sub-assembly which is assigned to 
const React.forwardRef Toolbar = ((the props, REF) => (
   <REF = {REF} div ID = "toolbar">


    Toolbar
  </div>
));

2. The high-order component forwards refs

When using {... this.props} transparent transmission, because the ref attribute is not, it can not pass through it.

But inside the high-order components, forwarded by React.forwardRef ().

// 高阶组件代码
function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {
      console.log('prevProps-->',prevProps)
      console.log('this.props-->',this.props)
    }
    render() {
      const {forwardRef, ...rest} = this.props;
      // ref指向被包裹的组件
      return <WrappedComponent {...rest} ref={forwardRef} />
    }
  }
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardRef={ref} />
  });
} 
export default logProps;

// 被包裹组件代码
import React from 'react';
import logProps from './logProps';
class Toolbar extends React.Component {
  render() {
    return (
      <div>Toolbar</div>
    )
  }
}
export default logProps(Toolbar)

// 父组件代码
import Toolbar from './toolbar';

class App extends React.Component{
  constructor(props) {
    super(props);
    this.ref = React.createRef();
    this.state = {num: 1}
  }
  componentDidMount() {
    console.log(this.ref.current); //Toolbar
  }
  add = () => {
    this.setState(state => ({
      num: state.num + 1
    }))
  }
  render() {
    return (
      <div>
        <Toolbar ref={this.ref} />
        <div onClick={this.add}>{this.state.num}</div>        
      </div>
    )
  }
}