浅谈React 属性和状态的一些总结
一、属性
1、第一种使用方法：键值对
<ClaaNameA name = “Tom” />
<ClaaNameA name = {Tom} />
<ClaaNameA name = {“Tom”} />
<ClaaNameA name = {[1,2,3]} />//数组
<ClaaNameA name = {FunctionNAme} /> //定义一个函数
2、第二种方法：三个点的展开对象形式
var props = {
one :”123”,
tow :321
}
<ClassNameB {…props} />
增加三个引号相当于这里面拿到两个属性了（one和two）
3、setProps形式：通过组件更新属性，不能在组件内部中修改属性的，因为会违背组件设计原则（尽量避免）
var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);
instance.setProps({name:”Tom" });
二、状态：事物所处的状况，由事物自行处理不断变化／事物的私有属性
getInitialState：初始化每个实例特有的状态
setState:更新组件状态
setState会触发diff算法：判断state和页面结果的区别，是否需要更新
三、状态和属性对比
状态和属性都会触发render更新，都是纯JS对象
状态：是和自己相关的，既不受父组件也不受子组件影响
属性：本身是不能自己去修改的，只能从父组件获取属性，父组件也能修改它的属性
根本的区别：组件在运行时需要去修改维护的就是状态
四、简单的demo熟悉一下：
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5 <title>daomul's example</title>
6 <link rel="stylesheet" href="../shared/css/base.css" />
7 </head>
8 <body>
9 <h1>Text demo</h1>
<div id="container">
</div>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx">
//内容组件
var Content = React.createClass({
getInitialState:function(){
return {
inputText:'',
};
},
handleChange:function(event){
this.setState({inputText:event.target.value});
},
handleClick:function(){
console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);
},
render:function(){
return <div>
<textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
<button onClick = {this.handleClick}>sumbit</button>
</div>;
},
});
//评论组件
var Comment = React.createClass({
getInitialState:function(){
return {
names:["Tom","Axiba","daomul"],
selectName:'',
};
},
handleSelect:function(){
this.setState(
{selectName : event.target.value}
);
},
render:function(){
var options = [];
//往options中添加子option
for (var option in this.state.names) {
options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)
};
return <div>
<Content selectName = {this.state.selectName}>
</Content>
<select onChange = {this.handleSelect}>
{options}
</select>
</div>;
},
});
//start render
React.render(<Comment></Comment>,document.body);
</script>
</body>
</html>
以上这篇浅谈React 属性和状态的一些总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
React简单介绍
React 背景知识 React 是一个用于构建用户界面的 JavaScript 库,主要用于构建 UI,而不是一个 MVC 框架,但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用,它是一个用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网站,于 2013 年 5 月开源.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. 以前没有 ajax 技术的时候,web 页面从
-
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道上, 请听我道来. Good old MVC 在一个交互式应用程序一切罪恶的根源是管理状态. "传统"的方式是MVC架构,或者一些变体. MVC提出你的模型是检验真理的唯一来源 - 所有的状态住在那里. 视图是源自模型,并且必须保持同步. 当模式的转变,
-
react系列从零开始_简单谈谈react
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会更新一篇.这篇react的系列博客会覆盖react目前的所有知识点: 一.React基础 1.React 虚拟DOM概念,React的性能高效的核心算法 2.React组件,理解什么叫组件化 3.React组件嵌套 4.JSX内置表达式 5.React的生命周
-
浅谈React 属性和状态的一些总结
一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var
-
浅谈react.js中实现tab吸顶效果的问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam
-
浅谈react受控组件与非受控组件(小结)
我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器.这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值.但是,因为React是单向数据流绑定的,这些组件可能会变得失控: 1.一个维护它自己state里的value值的<Input>组件无法从外部被修改: 2.一个通过props来设置value值的<Input>组件只能通过外部
-
浅谈React中组件逻辑复用的那些事儿
基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,
-
浅谈React Router关于history的那些事
如果你想理解React Router,那么应该先理解history.更确切地说,是history这个为React Router提供核心功能的包.它能轻松地在客户端为项目添加基于location的导航,这种对于单页应用至关重要的功能. npm install --save history 存在三类history,分别时browser,hash,与 memory.history包提供每种history的创建方法. import { createBrowserHistory, createHashHi
-
浅谈react 16.8版本新特性以及对react开发的影响
目录 react16.8版本更新 useEffect react16.8版本更新解决了什么问题 组件复用更便捷 hooks和reactdiff算法 总结 Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React.creactClass创建组件,之后在ES6推出之后,使用类组件Class构建包含生命周期的组件. react 16.8版本更新 react16
-
浅谈react+es6+webpack的基础配置
这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
-
浅谈React深度编程之受控组件与非受控组件
受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意.这恰恰显示React的威力,满足不同规模大小的工程需求.譬如你只是做ListView这样简单的数据显示,将数据拍出来,那么for循坏与 {} 就足够了,但后台系统存在大量报表,不同的表单联动,缺了受控组件真的不行. 受控组件与非受控组件是React处理表单的入口.从React的思路来讲,作者肯定让数据控制一切,或者简单的理解为,页面的生成与更新得忠实地执行JSX的指令. 但是表单元素有其特殊之处,用户可以通过键盘
-
浅谈react路由传参的几种方式
第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析 因为传参能够被用户看见,传递获取比较麻烦,所以不推荐 第二种传参方式,隐式路由传参 <Link to={{ pathname: '
-
浅谈React原生APP更新
App更新流程 1.在 App 打开时请求接口或文件, 获取远程版本/版本更新说明/地址等等重用信息 2.通过库或者原生方案, 获取 App 的当前版本 3.比较远程版本和当前版本的区别(可以使用库,也可以自己写一个比较方案) 4.通过获取到的链接进行操作(可以跳转到对应网站下载,类似蒲公英这种,可以是 apk 链接, 通过安卓原生方法下载, 也可以是 App Store 链接) 大致的流程图 详细说明: 1.这些远程信息,可以是接口, 这样可以有一个中台来控制, 当然也可以是一个文件, 让运维