ReactJS-2-props vs state

Posted 2020-10-14 CodingSwallow

props理解:

大多数组件都可以在创建的时候被不同的参数定制化，这些不同的参数就叫做props.
props的流向是父组件到子组件。

子组件Comment，是一条评论组件，父组件CommentList，展示了所有的评论内容，父组件在使用子组件的时候也就是<Comment />时候，不仅仅想使用一个普通的Comment组件，想要使用一个定制化的Comment组件<Comment text=‘aaa‘ />，text定制的是Comment的内容,，这里 text 是一个props,  父组件的想法很好，但是没有子组件的配合无法实现。那么在渲染组件的时候，子组件如何实现这个定制呢？子组件需要通过this.props.text获取父组件对自己的定制化，通常情况下，并不是所有的子组件都能获得父组件的青睐，防止子组件未获取父组件props，那么给子组件Comment组件加上static defaultProps = {text:‘我是默认的‘} 

1  //子组件Comment
2 class Comment extends Component {
3   static defaultProps = {text:‘我是默认的‘}
4   render () {
5      return (
6        <div>{this.props.text}</div>
7      )
8    }
9 }

 1  //父组件CommentList
 2 class CommentList extends Component {
 3   render () {
 4      return (
 5        <Comment text=‘aaa‘ />
 6        <Comment text=‘bbb‘ />
 7        <Comment  />
 8      )
 9    }
10 }

 

State理解：

state主要是组件自己用来控制自己的状态的，通过setState控制，比如一个开关有两种状态，on off，组件一开始的状态是off用代码表示为this.state={status:‘off‘}，现在希望点击一下就改变(setState)自己的状态，点击组件属于组件自己的行为，点击后开关变化是自己状态变化，整体是自己的行为改变了自己的状态,这就是state的作用。

Props vs States:

Props:

1. 不可变的
2. 用于从您的视图控制器（您的顶级组件）向下传递数据
3. 更好的性能，使用它将数据传递给子组件

State:

1. 应该在您的视图控制器（您的顶级组件）中进行管理，
2. 易变的
3. 糟糕的表现
4. 不要从子组件访问它，而是用props传递它

Props和State合作：

Props和State合作可以将父组件的state传给子组件