react (1) props, state, parent-child components pass values

Props: An object with a simple structure, used to pass data or methods in the parent component to the child component for use by the child component.

In the sub-component:

class PostItem extends Component {
    render(){
        const {title,author,date} = this.props;
        return(
            <ul>
                <li>{title}</li>
                <li>{auto}</li>
                <li>{date}</li>
            </ul>
        )    
    }
}

In the parent component:

const data = [{title:"1",author:"张三"，date:"2019-07-25"},{...}];
class PostItem extends Component{
    render(){
        <div>
            <ul>
                {data.map(item => <PostItem title={item.title} author = {item.author} 
                date = {item.date}>)
                }
            </ul>
        </div>
    }
}

state：

It is the internal state of the component, and the state change of the state will eventually be displayed on the UI. Define the initial state of the component through this.state in the component's constructor.

When the user's behavior needs to change a certain state, the onChange method can be used to change the value of the state, and the setState can be used to reset the value of the state, which is the only way to change the state of the component.

class PostItem extends Component {
    constructor(props) {
    super(props);
    this.state = {
        vote: 0
    };
}
// 处理点赞逻辑
handleClick() {
    let vote = this.state.vote;
    vote++;
    this.setState({
        vote: vote
    });
    }
//省略。。。
}

When developing React applications, we must first seriously think about which components should be designed as stateful components and which components should be designed as stateless components. Use stateless components as much as possible. Stateless components don't need to care about state changes, they only focus on the display of UI, so they are easier to reuse!

The general idea of ​​React application component design is to manage the state changes of the entire application by defining a few stateful components, and pass the state to the rest of the stateless components through props, and the stateless components complete most of the rendering work.

When a state is dependent or affected by multiple components, the state is promoted to the nearest common parent component of these components for management, and props are used to pass data or functions to manage this dependent or influencing behavior.

But blindly improving state is not the best way to manage state, because state management tools like redux will be introduced in the future to manage this working state

For states that are not dependent and affected by multiple components (such as the expanded and collapsed states of a certain drop-down menu), generally speaking, it only needs to be stored inside the component, and no promotion or special management is required.

When the parent component passes the value to the child component, use props;

When a child component passes a value to a parent component, it is best to directly pass the function that changes the state in the parent component to the child component, and the parent component directly changes the state. So it becomes the parent component to pass the value to the child component