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. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  2. 使用 JS 关闭警告框及监听自定义事件(amaze ui)

    使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...

  3. ElasticSearch 2.4

    ES是一个基于Lucene的分布式全文搜索服务器,和SQL Server的全文索引(Fulltext Index)有点类似,都是基于分词和分段的全文搜索引擎,具有分词,同义词,词干查询的功能,但是ES ...

  4. C语言结构体的字节对齐原则

    为什么要对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址访问,这就需要各种类型数据 ...

  5. CSU1656: Paper of FlyBrother(后缀数组)

    Description FlyBrother is a superman, therefore he is always busy saving the world.  To graduate fro ...

  6. 记一次内存泄漏调试(memory leak)-Driver Monkey

    Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 硬件环境:AM335X 软件环境:li ...

  7. 数据结构与算法实验题 9.1 K 歌 DFS+剪枝

    数据结构与算法实验题 K 歌 ★实验任务 3* n 个人(标号1~ 3 * n )分成 n 组 K 歌.有 m 个 3 人组合,每个组合都对应一个分数,你能算出最大能够得到的总分数么? ★数据输入 输 ...

  8. 10、V4L2摄像头获取单幅图片测试程序(MMAP模式)

    #include <stdio.h>#include <stdlib.h>#include <string.h>#include <assert.h> ...

  9. [TypeStyle] Compose CSS classes using TypeStyle

    We will demonstrate composing classes using the utility classes function. classes is also what we re ...

  10. 程序猿学英语——In September the English learning summary

    转眼间9月份又过去了,又该好好总结一下这个月的英语学习情况了. 在暑假快结束的时候.9期师姐给我们測了英语快照.当初測的时候就发现一个问题:当測自己听过尤其是读过的东 西的时候,自己都能听出来.測自己 ...