React props和state的关系,分别什么时候使用

React props和state的关系,分别什么时候使用

$1.state$

    state作用是在组件内部中可以根据接口或触发事件等来改变、修改和控制组件.
其修改状态通过this.setstate的方法来进行修改.
它的初始化在construct构造函数中.
通过上面解释和说明可知:  state通过组件内部来进行改变状态.外部不通过其他介质是无法访问和修改的

$2.props$

    props作用是通过父组件传入的参数来改变.
它在组件内部仅能只读状态,不可修改,.
通过上面解释和说明可知:  props通过父组件传递参数.组件内不可修改.除非父组件主动传入props的值来重新渲染组件

$3.props和state的关系$

    props和state的关系可以说是互补性,一个更多是父组件传参渲染,另一个更多是组件内部控制渲染.

小编认为:props更多是用于配置参数(比如样式,自定义内容),state更多是用于事件交互来改变状态

举例:(分别什么时候使用)

最下方的收藏 “⭐️” 小按钮
  1.组件调用 ★ 默认
     1.1未收藏 颜色为深灰色
     1.2收藏 颜色为红色
  假设这为组件调用 <collect />

  为了美观,需要对收藏和未收藏时组件样式更改
  也为了通用性,往往只需要对props和state稍微操作就能增加组件复用率和美观

最终实现为下方

  2. props和state使用
    2.1.props配置参数修改默认样式改为渐变颜色
<Collect colorFrom="rgb(241, 239, 106)" colorTo="rgb(238, 124, 30)"/>
通过this.props.colorFrom和this.props.colorTo来修改五角星的渐变颜色
{‘color’:this.props.colorFrom||‘’}

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(this.props.colorFrom), to(this.props.colorTo));

    2.2.state更新事件状态
      this.state = {
           collectFlag:false //默认未收藏
       };

      onClick={this.handleClick.bind(this)}

      handleClick(){
          this.setState({ collectFlag: !this.state.collectFlag });
      }

    通过组件触发事件来改变state状态

简易代码

class Collect extends Component {
  constructor(props){
    super(props);
    this.state = {
      collectFlag:false //默认未收藏
    };
  }
  handleClick = function(){
    this.setState({ collectFlag: !this.state.collectFlag });
  };

  render() {
    return (
      <div style={{'color':this.props.colorFrom||''}} onClick={this.handleClick.bind(this)}>
        ★
      </div>
    );
  }
}

//组件调用
<Collect colorFrom="rgb(241, 239, 106)" colorFrom="rgb(238, 124, 30)"/>