props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性。在大多数React教程里讲
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。其实这种说法有问题。可以参考一篇文章《React中state与props介绍与比较》
组件中的props本质作用是一种父级向子级传递数据的方式。props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改。
        var WebSite = React.createClass({
            getInitialState() {
                return ( {
                    name: '二手车',
                }
                );
            },
            onPress() {
                this.setState({
                    name: '新的' + this.state.name,
                })
            },

            render() {
                return (
                    <div onClick={this.onPress} >
                        <Name name={this.state.name} />
                    </div>
                );
            }

        });

        var Name = React.createClass({
            render() {
                return (
                    <h1>{this.props.name}</h1>
                );
            }
        });

        ReactDOM.render(
            <WebSite />,
            document.getElementById('example')
        )
 

React中的state与props的再理解的更多相关文章

  1. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  2. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  3. react中的setState的使用和深入理解

    前端框架从MVC过渡到MVVM.从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好 ...

  4. react中使用prop-types检测props数据类型

    一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...

  5. 如何理解react中的super() super(props)

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

  6. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  7. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  8. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

  9. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

随机推荐

  1. iOS_01_C语言简介

    1.先学C语言的原因 * oc基于C. * oc 跟 C的思想和语法很多地方不太一样,而且OC能和C混用. * C 是所有编程语言中的经典,很多高级语言都是从C语言中衍生出来的,比如 C++,C#.O ...

  2. ViewPage第二课为ViewPage加入标题

    在第一课 学前准备:掌握ViewPage第一课http://blog.csdn.net/wei_chong_chong/article/details/50468832 为ViewPage加入标题: ...

  3. C#DateTime与Unix时间戳的转换

    /// <summary> /// Unix时间戳转为C#格式时间 /// </summary> /// <param name="timeStamp" ...

  4. autohotkey word getfullname (ComObjActive)

    直接使用ComObjActive

  5. POS 60域用法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 自定义域(Reserved Private) 1.变量属性 N...17(LLLVAR),3个字节的长度值+最大17个字节的数字字符域. 压缩时用 ...

  6. 【POJ 3415】Common Substrings

    [链接]h在这里写链接 [题意]     求两个串的长度大于等于k的公共子串个数.     相同的重复计数. [题解]     先把两个字符串用一个分隔符分开.最好比出现的字符都大的一个数字.    ...

  7. ios根据字体大小设置

    , , , , , , , , , , , }; //这么多字体,从大到小挨个尝试 ; UIFont *font; ; i < array_length; i++) { font = [font ...

  8. static 静态

    摘自:https://blog.csdn.net/Kendiv/article/details/675941 关于static的  ""记忆性"" 我们可以用做 ...

  9. stm32的电源

    有人说rtc会不工作

  10. 初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序

    原文:初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序 1. 安装.NET Core 安装包下载地址:https://www.microso ...