`
_wyh
  • 浏览: 61077 次
社区版块
存档分类
最新评论

React js属性和状态的使用和区别

阅读更多

 

React js的属性和状态

 

 

属性:props    一般属性是不改变的,经常作为传入的数据.

 

例: 建立PropsTest控件,从网页上输出简单的  Hello, XXX, XXX为传入的属性name,当name为空时,输出Hello,World   输入为其他值时,比如:Curry,输出Hello,Curry

<script type="text/babel">
    var PropsTest = React.createClass( {
        render: function () {
            return (
                    <div>
                        Hello, {this.props.name? this.props.name: "World"}
                    </div>
            );
        }
    });
    ReactDOM.render(
            <PropsTest name="Curry"/>,
            document.body
    );
</script>

 

 

 

状态:state  一般状态是不断变化的,空间内部可以控制state的变化

: 建立StateTest控件,实现在输入框中输入数据XXX,输入Hello, XXX.  XXX随着输入框的输入内容而改变.  

 

render方法中定义<div>Hello, {this.state.name}</div>,   定义input,并添加onChange方法textChange, 在方法里面代码实现name的值随输入的值改变

 

代码如下:

<script type="text/babel">
    var StateTest = React.createClass( {
        getInitialState: function () {
            return {
                name: 'World'
            }
        },
        textChange: function (event) {
            this.setState({
                name: event.target.value
            });
        },
        render: function () {
            return (
                    <div>
                        <p>Hello, {this.state.name}</p>
                        <input type="text" onChange={this.textChange} />
                    </div>
            );
        }
    });
    ReactDOM.render(
            <StateTest />,
            document.body
    );
</script>

 

区分:  组件在运行时需要修改的数据时状态

状态和属性的相似点: 1,是纯js对象

                                2,改变会触发render方法

                                       

                     不同点: 1,属性值可以由父类传入,状态值不能

                                       2,属性值不在组件内部修改,而状态值就是在组件内部修改的

 

 

分享到:
评论

相关推荐

    react下的react.min.js和react-dom.js

    开发者可以利用React创建可复用的组件,通过定义状态和属性来管理组件的生命周期和行为。 `react-dom.js`则是React与实际DOM(Document Object Model)交互的桥梁。它提供了将React组件渲染到浏览器DOM的方法,同时...

    掌控react状态管理

    《掌控React状态管理》是一本全面介绍了React状态管理和Redux使用的书籍。通过阅读本书,不仅可以学习到React的基础知识,还能深入了解如何利用Redux来管理更复杂的应用程序状态。这对于任何想要提高React应用开发...

    react开发相关js资源包大全,基本都有,免费下载

    在开发环境中,通常会使用`react.development.js`,而在生产环境中,则使用经过优化的`react.min.js`,以减少文件大小和提高性能。 总的来说,这个“react开发相关js资源包大全”虽然没有包含所有可能需要的工具,...

    react.js完整安装包

    React.js 是一个流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它由Facebook开发并维护,以其组件化、虚拟DOM和声明性编程风格而闻名。在本压缩包中,你获得了React v15.3.2的源代码及相关示例...

    react-json2react使用JSON来创建React无状态组件

    "react-json2react"是一个这样的工具,它允许开发者使用JSON格式的数据来快速生成React的无状态组件(也称为函数组件)。这个工具特别适合于那些需要动态配置UI或者对数据结构化描述的场景,比如配置化表单或者复杂...

    React全家桶PDF讲解

    在MVC中,模型、视图和控制器之间有明确的职责划分,而在React中,组件是核心,每个组件都可以有自己的状态和属性,通过状态变化驱动视图更新。 React的特性包括: 1. 虚拟DOM:React使用虚拟DOM作为内存中的表示...

    React-Developer Tools-3.6.0.zip 适合react v17以下

    2. **组件状态和属性检查**:开发者可以使用 React Developer Tools 查看每个组件的状态和属性,从而更好地理解组件的行为和状态变化。这对于调试和排查问题非常有帮助。 3. **组件性能分析**:React Developer ...

    react js基本文件.rar

    4. **引入React核心文件**: 在没有使用像Create React App这样的脚手架时,你需要手动引入React和React DOM的JavaScript文件。在HTML文件中,可以通过`&lt;script&gt;`标签直接引入CDN链接或者本地的`.js`文件。例如: ``...

    react,react-dom及babel打包文件.zip

    3. 状态和属性:组件的状态(state)是组件内部可变的数据,而属性(props)是从父组件传递给子组件的静态数据。 4. 生命周期方法:React组件有多个生命周期方法,如`componentDidMount`、`shouldComponentUpdate`、...

    React应用框架:一个使用React构建本地应用程序的框架

    4. **状态管理和生命周期方法**:React组件有自己的状态(state)和属性(props)。状态是可以改变的,而属性是从父组件传递下来的。组件有特定的生命周期方法,如`componentDidMount`、`componentDidUpdate`和`...

    React.zip(包含React快速入门 和 深入React)

    5. **React Hooks**:自React 16.8版本引入,Hooks提供了在函数组件中使用状态和其他React特性的方式,如`useState`用于创建状态变量,`useEffect`用于副作用管理,`useContext`用于访问上下文。 6. **服务器端渲染...

    react-React的videojs播放器组件

    本教程将深入探讨如何在React应用中使用Video.js组件,以及如何利用`react-awesome-player`这个库来简化这一过程。 首先,让我们了解`react-awesome-player`。这是一个React组件,它封装了Video.js,为React开发者...

    react-使用Reactjs开发的一个15puzzle拼图游戏

    开发过程中,开发者可能使用了`useState`和`useEffect`这两个React Hooks来管理组件的状态和副作用。`useState`用于创建状态变量,`useEffect`则用于在状态改变时执行某些操作,如更新DOM、订阅事件或执行定时任务...

    redux+react+router+node.js

    在全栈开发中,"Redux+React+Router+Node.js"是一个常见的技术组合,用于构建复杂的前端和后端应用程序。这个组合涵盖了用户界面、状态管理、路由以及服务器端处理等多个关键领域。 Redux是一个专门为JavaScript...

    react-利用React创建word文档

    React Hooks是React 16.8版本引入的新特性,允许我们在不编写类组件的情况下使用状态和其他React特性。其中,useState是用于管理组件状态的最基础的Hook,useEffect则用于处理副作用,如数据获取或订阅。 Haunted库...

    react.js小叔叔

    总的来说,“React.js小叔叔”可能是一本介绍React基础和最佳实践的教程,通过阅读和学习,开发者可以掌握React的基本概念、组件开发、状态管理和虚拟DOM的运用,从而在实际项目中熟练运用React.js进行前端开发。

    jquery和react的js文件

    在JavaScript的世界里,jQuery和React是两个非常重要的库和框架,它们各自服务于不同的目的并有着独特的功能。jQuery简化了DOM操作、事件处理、Ajax交互等任务,而React则是Facebook推出的一个用于构建用户界面的库...

    react数字折叠翻页效果组件

    总的来说,“react数字折叠翻页效果组件”是一个利用React.js和JavaScript技术构建的前端UI组件,它提供了一种吸引人的数字展示方式。在使用时,需要注意`value`属性的正确使用,并结合其他前端技术进行集成和定制,...

    react-使用React和GraphQL重实现一个HackerNews网站

    1. 状态和属性:React组件的状态决定了组件的视图如何变化。属性是从父组件传递给子组件的数据,用于定制子组件的行为。 2. 生命周期方法:React组件有多个生命周期方法,如`componentDidMount`、`...

    react-学习react框架推荐

    5. Hooks介绍:React 16.8引入了Hooks,如`useState`、`useEffect`、`useRef`等,它们使得在函数组件中使用状态和生命周期方法成为可能,大大简化了代码结构。 6. `useState`:用于在函数组件中添加状态变量,同时...

Global site tag (gtag.js) - Google Analytics