react(一) props，state，父子组件传值

props：是一个简单结构的对象，用于把父组件中的数据或方法传递给子组件，供子组件使用。

子组件中：

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

父组件中：

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：

是组件内部的状态，state的状态变化最终将显示到UI上。在组件的构造方法constructor中通过this.state定义组件的初始状态。

当用户的某些行为要改变某种状态的时候就可以用onChange方法来改变state的值，使用setState可以重置state的值，其也是改变组件状态的唯一方法。

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

在开发React应用时，一定要先认真思考哪些组件应该设计成有状态组件，哪些组件应该设计成无状态组件。尽可能多的使用无状态组件，无状态组件不用关心状态的变化，只聚焦于UI的展示，因而更容易被复用！

React应用组件设计的一般思路是，通过定义少数的有状态组件管理整个应用的状态变化，并且通过props将状态传递给其余的无状态组件，由无状态组件完成绝大部分的渲染工作。

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。

但是一味的提升状态并不是一个最好的管理状态方法，因为以后会引入redux这样的状态管理工具进行管理这种工作状态

对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

父组件向子组件传值的时候，使用props；

子组件向父组件传值的时候，最好是直接将父组件中改变state的函数传递给子组件，由父组件直接改变state。因此又变成了父组件向子组件传值

react(一) props，state，父子组件传值

猜你喜欢