react in the state, props, ref

state

state the name suggests is a state, it is only used to control the components themselves their own state, we can use the state to complete the control of behavior, update data, interface rendering, because the components can not modify the incoming props, so the need to record their own data changes.

So, how do we modify the value of the state of it?

Method react to modify the values for the state when the state of setState

how to use

this.setState({

　　key:value

})

that's fine.

props

react said unidirectional data flow value is said props, according to this characteristic it also has a role: communications between components. props itself is immutable, but there is a situation that looks like a variable, that is the parent component of the state as props subassembly, when state change parent component, sub-assembly of props also followed the change, in fact, it still follows this a law of: props can not be changed.

props or through certain default properties from the parent component come to pass, the following is written:

static propProps = {
         val:PropTypes.string.isRequired
}
static defaultProps = {
         val:0
}

If you still feel confused state and props usage scenarios, remember a simple rule: as little as possible with the state, as much as possible with props.

No state components called stateless component (stateless component), set up called the state of stateful components (stateful component). Because the state will bring management complexity, we try to write more stateless components, as little as possible to write stateful components. This will reduce the difficulty of code maintenance, and also enhance component reusability to some extent. Functional components only props no state, and react very encouraged us to write functional components.

The following props and state to make a summary:

props used to define an external interface, state record for the state of the internal
props assignment outside world that use components, state assignment that internal components
Components should not change the value of props, and state the purpose of existence is to allow components to modify the

state memory components equivalent to the components, the meaning of its existence is to be modified each time by modifying state setState function to change the state of the component, and then reflected by the rendering process. But props components should never be modified, we can imagine a scenario where a parent component to pass several subcomponents same props, props if a sub-component will modify, then the other components will not be able to get their mind value, then the situation will be chaotic.

refs

In some cases will need to edit the element, may be modified progeny React component instance, it may be a DOM element. Then you should use refs to operate DOM.
[Note] If you can achieve through declarative, then try to avoid using refs.

ref

React to support any of the components add special attribute ref, ref can be a string, it can be a property accepts a callback function that will be executed immediately when the component is loaded or unloaded.
[Note] in the assembly mountto go get after ref. componentWillMountAnd the first rendertime are not acquired in the componentDidMountacquisition to order.

New ref

Prior to version 16.3, React provided in two refways: strings and callback, some problems because of the way the string, it is recommended to use a callback to official use ref. And now introduced createRef API, according to official said, is to use a zero defect refapproach, the callback mode also lets give way.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Then current属性, you can get the current element

this.myRef.current

[Note] using styledComponentsstylized elements of the interface is the exposure innerRefrather thanref

<Wrap innerRef={this.itemRef}>

ref transfer theory

When added to the HTML element ref 属性, the ref callback is received as a parameter underlying DOM elements.
React assembly while loading the DOM element passed ref callback function, when you uninstall will be passed null. ref callback will componentDidMountor componentDidUpdateexecution before these lifecycle callbacks.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

Shorter wording as follows

ref={input => this.textInput = input}

Class components

· When the refproperty using classcustom assembly declared refcallback is received React instance already loaded.

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

[Note] This method is only for class declared CustomTextInputvalid

Functional Components

Ref attribute can not be used in functional components because they have no instances.

Parent node assembly is exposed DOM

Exposing a special property in the child node. Function will get a child node attribute, and attached to the DOM node as the ref attribute. This allows the parent by the middleware to the ref callback offspring DOM node.
This method is applicable to class components and functional components:

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

In the above example, Parent it is ref a callback as a special inputRef transmitted to CustomTextInput, and CustomTextInput by ref property passed to <input>. Finally, Parent in this.inputElementthe set to be CustomTextInputthe <input>elements corresponding DOM node.

Reference Links: https://www.jianshu.com/p/2f6d81a15d81

　　　　　 https://www.jianshu.com/p/628d5514b145