Let’s do a summary about state and props.

The primary purpose of state is for components to save, control, and modify their mutable state. State is initialized inside the component and can be modified by the component itself, but cannot be accessed or modified externally. You can think of state as a local data source that can only be controlled by the component itself. The state in state can be updated with the this.setState method, which causes the component to be rerendered.

The main purpose of the props is to allow the parent component that uses the component to pass in parameters to configure the component. It is a configuration parameter that is passed in externally and cannot be controlled or modified internally by the component. The props of a component are always the same unless the external component actively passes in new props.

State and props are intimately related. They can both determine the behavior and appearance of components. The data in a component’s state can be passed to sub-components via props, and a component can initialize its own state using props passed in from outside. But their responsibilities are pretty clear: State is for the component to control its own state, and props is for the external to configure the component itself.

If you’re still confused about the scenarios for using state and props, remember a simple rule: use props as much as possible and as little state as possible.

A component that has no state is a stateless component, and a component that has state set is a stateful component. Because of the complexity of state management, we write as many stateless components as possible and as few stateful components as possible. This will reduce the difficulty of maintaining the code and increase the reusability of components to some extent.

 

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React defaultProps(Default parameter) The props cannot be modified inside components</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>You can configure the default parameters by adding the class attribute defaultProps to the component. Once the props is passed in, you cannot modify it inside the component. But you can do this by passing in new props via active re-rendering of the parent component.<div id="root"></div>
    <script type="text/babel">
        class Toggle extends React.Component {
        static defaultProps = {
            likedText: 'cancel'.unlikedText: 'thumb up'
        }        
        constructor(props) {
            super(props);
            this.state = {isToggleOn: true};

            // This binding is necessary to make 'this' work in the callback
            this.handleClick = this.handleClick.bind(this);
        }
 
        handleClick() {
            //this. Props. LikedText = 'cancel 2'; // The props were modified
            this.setState(prevState= > ({
                isToggleOn: !prevState.isToggleOn
            }));         
        }
 
        render() {
          return (
            <button onClick={this.handleClick}>
              {this.state.isToggleOn ? this.props.likedText : this.props.unlikedText}
            </button>
          );
        }
      }
 
      ReactDOM.render(
        <Toggle />.document.getElementById('root'));</script>
</body>

</html>
Copy the code