react中props和state的区别有哪些?

react中props和state的区别有哪些?下面本篇文章给大家介绍一下react中props和state的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

组件内可以通过props来获得属性值,看下面的实例先来回顾 一下Props最基本的使用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
    class MyComponent extends React.Component {
        //此处的构造器是可以省略的
        constructor(props){
            super(props);
        }
        render() {
            return <div>好神奇! {this.props.siteName}!</div>;
        }
    }
    var element = <MyComponent siteName="zhangpeiyue.com"/>;
    ReactDOM.render(
        element,
        document.querySelector("#wrap")
    );
</script>
</html>

通过以上实例咱们知道通过props可以得到组件MyComponent的属性siteName的值。

通过defaultProps添加默认Props

咱们可以通过为组件类添加defaultProps属性来为props设置默认值。defaultProps是一个对象,只要将添加的值放到defaultProps的属性中即可,例如:

class MyComponent extends React.Component {
    render() {
        //此处返回   <div>小张今年18岁了</div>
        return <div>
            {this.props.userName}今年{this.props.age}岁了!
        </div>;
    }
}
//为组件添加默认属性 userName与age
MyComponent.defaultProps={
    userName:"小张",
    age:18
}
var element = <MyComponent/>;
ReactDOM.render(
    element,
    document.querySelector("#wrap")
);

State和Props

咱们可以通过在父组件当中设置State,然后通过在子组件上使用props来接收收父组件的state值。

//父组件
class MyComponent extends React.Component {
    constructor(){
        super();
        //设置sate,添加name与age属性
        this.state={
            name:"张培跃",
            age:18
        }
    }
    render() {
        return <div>
            <Name name={this.state.name}/>
            <Age age={this.state.age}/>
        </div>;
    }
}
//子组件Name
class Name extends React.Component{
    render(){
        return <div>{this.props.name}</div>
    }
}
//子组件Age
class Age extends React.Component{
    render(){
        return <div>{this.props.age}</div>
    }
}
var element = <MyComponent/>;
ReactDOM.render(
    element,
    document.querySelector("#wrap")
);

使用PropTypes进行类型检测

为了保证咱们的组件被正确使用,React提供了可以对Props进行验证的功能PropTypes。PropTypes为组件类自身的属性,提供了很多验证器,来验证传入的数据是否有效。当传入的数据无效时,JavaScript控制台会抛出警告。

另外需要注意的是,在开发环境下,当你使用了一个无效的值作为prop时,控件台会出现警告;在生产环境下,为了性能考虑会将PropTypes忽略掉!

要想使用propTypes,首先要对prop-type.js文件进行引入。

<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/prop-types.js"></script>

具体使用,可看以下示例:

var name="老大"
var age=18;
class MyComponent extends React.Component {
    render() {
        return <div>
            {this.props.name}今年{this.props.age}岁了!
        </div>;
    }
}
//propTypes是组件类的静态属性
MyComponent.propTypes={
    //将name设置为string类型
    name:PropTypes.string,
    //将age设置为number类型
    age:PropTypes.number
};
var element = <MyComponent name={name} age={age} />;
ReactDOM.render(
    element,
    document.querySelector("#wrap")
);

以上示例当中的name与age不合法时,会弹出类型不符的警告!所以在项目开发中使用PropTypes进行对props的验证还是很有好处的!

更多验证器说明如下:

MyComponent.propTypes = {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

现在我们来总结下,props与state的区别:

props是指组件间传递的一种方式,props自然也可以传递state。由于React的数据流是自上而下的,所以是从父组件向子组件进行传递;另外组件内部的this.props属性是只读的不可修改!

state是组件内部的状态(数据),不能够直接修改,必须要通过setState来改变值的状态,从而达到更新组件内部数据的作用。

props和state是经常要结合使用的,父组件的state可以转化为props来为子组件进行传值。在这种情况下,子组件接收的props是只读的,想要改变值,只能通过父组件的state对其进行更改。

更多web开发知识,请查阅 HTML中文网 !!

以上就是react中props和state的区别有哪些?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏