React中的state和props分析

最新推荐文章于 2024-02-19 09:31:04 发布

Coding_Ape

最新推荐文章于 2024-02-19 09:31:04 发布

阅读量932

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/sweet___smile/article/details/77922791

js 专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了React中State和Props的概念及其应用场景。State用于维护组件内部状态，可根据用户交互变化；Props则用于组件间的数据传递，相对不可变。通过具体示例展示了如何运用这两者来实现页面的不同渲染效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用其他文章的一句话，props 和 state 的差异在于：state 用于配置组件内的状态，props 则用于在组件间传递数据。

通俗来讲，state和props都是为页面实现不同的渲染效果服务的，但这一渲染过程中，state是相对组件来说(可通过用户交互事件等)发生变化的，而（组件实例中的props）或者（子组件中的props相对父组件来说)是不可变的。（Ps. 这段话说的真的很抽象！……）

（一） state

在初始化页面时，使用getInitialState或者在构造器中赋予state初始值，其后使用setState或者页面操作事件使state发生变化，根据state值的不同，使页面实现不同的渲染效果。

var Hello = React.createClass({
        getInitialState: function() {
          return {name:true};
        },
        handleClick: function(event) {
          this.setState({name: !this.state.name});
        },
        render: function() {
          var text = this.state.name ? 'Hello Kitty' : 'Hello World';
          return (
            <button onClick={this.handleClick}>
              {text}
            </button>
          );
        }
    });

以上代码中，state是用来配置button文字的显示状态的，当name为true时，显示“Hello Kitty”，当name为false时，显示“Hello World”，这一状态切换适用于任何一个Hello组件使用的场景。

（二）props

定义组件时声明props，在不同的组件适用场合赋予props不同值，可在组件中使用props实现不同的渲染效果

var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="Runoob" />,
        document.getElementById('example')
      );

其作用类似于

var HelloMessage = React.createClass({
	    getInitialState: function(){
		return {name: 'Kitty'};
	    },
	    render: function() {
	      return <h1>Hello {this.state.name}</h1>;
	    }
	});

但，当使用props时，不同的组件使用场景，name值是不一样的。

（三）state和props

当多个组件一起使用，并且有了子组件和父组件的嵌套关系时，可以在子组件中声明props，而在父组件中通过将不同的state值赋给子组件的props，就可以在页面实现不同的渲染效果，此时，

var Info = React.createClass({
  getInitialState: function() {
    return {
      name: "Hello Kitty",
      age: 10
    };
  },
 
  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Age age={this.state.age} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Age = React.createClass({
  render: function() {
    return (
      <h1>{this.props.age}</h1>
    );
  }
});

怎样结合两者进行更好的实现，还是需要结合实际需求进行斟酌的（这句话说了等于没说(#‵′)凸）。而想要真正分清楚什么时候使用两者，就需要在每次使用中多问自己几个为什么（比如，这里为什么使用state，能不能换成props等）。