react入门（4）
十四、props和state的混搭使用
案例19：(在 react入门2和3 里讲过的东西，这里简单讲解一下，不再细说)
<!DOCTYPE html>
<html>
<head>
<title>react入门</title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Parent = React.createClass({
getInitialState:function(){
return {
val:'123'
};
},
changes:function(event){
this.setState({val:event.target.value})
},
render:function(){
return (
<div>
<input type="text" value={this.state.val} onChange={this.changes} />
<Child txt={this.state.val} />
</div>
)
}
}); var Child = React.createClass({
render:function(){
return (
<div>{this.props.txt}</div>
)
}
}); ReactDOM.render(
<Parent />,
document.getElementById('example')
)
</script>
</body>
</html>
效果如下
分析如下
1. Parent组件，设置初始值
2. Parent组件，this.state.val获取value的初始值，input值发生改变就触发onChange事件，调用changes方法
3. Parent组件，通过setState重新给val赋值
这里event.target指的就是input，event.target.value就是input的值
我们在 react入门3 里讲过 refs，这里也可以通过给input设置一个ref属性，通过this.refs.xxx来获取input
4. 在父组件Parent里，Child标签上有一个txt属性，这个属性的属性值就是this.state.val，也就相当于世input的value值，它是一个变化的值，这里也就是要将父组件Parent的信息（val值）传递给子组件Child
5.在子组件Child里，通过this.props.txt来获取父组件传递过来的信息。这里就是获取父组件Parent里，Child标签上，txt属性的值
总结一下上面这个例子：
1. 我们在子组件Child里，通过this.props.txt获取父组件Parent传过来的信息，即父组件里txt属性的值。
2. txt属性对应的值，是通过this.state.val来读取的getInitialState里面设置的val的值，即123，这是初始状态。
3. input上绑定了onChange事件，当input值发生改变的时候，触发changes方法
4. changes方法里面，通过setState给val重新赋值
5. 因此最终呈现在页面上的效果就是，当你修改了父组件里input的值，子组件Child里的内容也会跟着一起改变
案例20：
<!DOCTYPE html>
<html>
<head>
<title>react入门</title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Parent = React.createClass({
getInitialState:function(){
return {
txt:'您好'
};
},
render:function(){
return (
<div>
<Child txt={this.state.txt} />
</div>
)
}
}); var Child = React.createClass({
getInitialState:function(){
return {
txt:this.props.txt
};
},
render:function(){
return (
<div>{this.state.txt}</div>
)
}
}); ReactDOM.render(
<Parent />,
document.getElementById('example')
)
</script>
</body>
</html>
效果如下
父组件 Parent 的解析如下所示
子组件 Child 的解析如下所示
在这里值得一提的是，在子组件里，从父组件传递的信息（this.props.txt）可以用来设置初始值
十五、state与props的对比
看一下他们之间的区别吧
属性Props：
- 属性被传递的方式，一般在组件被调用的时候传入
- 可以获取父组件的初始值、修改值，也可以获取父组件的属性、方法（this.props.xxx）
- 可以设置初始值（getInitialState）
- 从父组件里传递过来的信息，可以用来设置子组件的初始值
- 父元素赋予的，不可以在子组件里被修改
状态state:
- 需要在组件内部去声明
- 可以设置初始值（getInitialState）
- 父组件的state，不可以用来设置子组件的初始值
- 可以在组件内部修改 （setState）
十六、生命周期
React生命周期总体分为三个状态：
- 挂载 mounted （初始化时候）
当我们看到页面元素从jsx变成dom节点的时候,react组件已经被载入（mounted）到页面中。
- 更新 update（组件在运行中如果发生状态和属性的变化发生的）
当react组件中的数据发生变化的时候，需要重新渲染页面（重新更新页面元素的时候，例如获取本次数据与上次数据不一样，需要重新更新页面数据），此时需要将react组件重新渲染一次。
- 移除 unmount（组件卸载和销毁状态）
当组件需要被从页面中废弃和销毁的时候，就需要将react组件从页面中删除掉。
React提供生命周期方法，你可以在这些方法中放入自己的代码。React提供will方法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。
十七、挂载 mounted
- getDefaultProps()
设置组件内部属性（一般用于设置组件内部的常量），比如，请求一个ajax，请求的url就可以设置成内部属性，因为url是不变的。返回对象
- getInitialState()
设置组件内部的状态，返回对象（初始的state数据）。
- componentWillMount()
组件即将加载时，在这时可以获取ajax数据，并解析。
- render()
默认创建jsx --> dom，默认返回JSX
- componentDidMount()
组件加载完毕时，挂载的状态。可以获取渲染后的dom节点，调用第三方插件（例如jq）
上面的五个函数是每个react组件初始化阶段走过五步，开发中，不需要用时可以不写（getInitialState已经在上面使用过了，其他几个书写方式类似）。
易错点：render只负责渲染，每次数据刷新都调用render函数
案例21：
<!DOCTYPE html>
<html>
<head>
<title>react入门</title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Test = React.createClass({
getDefaultProps:function(){
console.log("1 get props")
return {}
},
getInitialState:function(){
console.log("2 get state")
return {}
},
componentWillMount:function(){
console.log("3 wiil mount")
},
render:function(){
console.log("4 render")
return (
<div>
你好
</div>
)
},
componentDidMount:function(){
console.log("5 did mount")
}
}); ReactDOM.render(
<Test />,
document.getElementById('example')
)
</script>
</body>
</html>
效果如下
这个例子是按照执行顺序去写的，这几个函数你也可以不按照这个顺序去写。
十八、更新 update
- componentWillReceiveProps(nextProps)
当挂载的组件收到新的props时，调用次函数。
该方法用于比较this.props和nextProps，当两者不同的时候，使用this.setState()来改变state
- shouldComponentUpdate(nextProps,nextState)
当组件接收到新的props、state时，要做出是否更新dom的决定，这时函数被调用，返回boolean。
可以写入一些逻辑，控制数据的更新。实现该函数，优化this.props和nextProps，以及this.state和nextState，如果不需要React更新DOM，则返回false。
- componentWillUpdate(nextProps,nextState)
在组件重新渲染之前执行，在渲染之前最后的props和state都发生了改变，这个函数使用很少，一般用在日志和记录的打印。
你可以在这里调用this.setState()
- componentDidUpdate()
当组件重新渲染完毕后调用
组件运行中生命周期函数被触发的条件：
- 当父组件修改子组件的属性props时
- 当组件自身修改状态state时
十九、移除 Unmount
componentWillUnmount()
在组件移除和销毁之前被调用。清理工作应该放在这里。这个函数很少用到，因为浏览器本身具有垃圾回收机制
react入门（4）的更多相关文章
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门（2）
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- springmvc入门的第一个小例子
今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...
- 剑指offer编程题java实现（正在更新）
面试题三:查找二维数组中元素问题 public static void main(String[] args){ int[][] num = {{1,2,8,9},{2,4,9,12},{4,7,10 ...
- ABP理论学习之事件总线和领域事件
返回总目录 本篇目录 事件总线 定义事件 触发事件 处理事件 句柄注册 取消注册 在C#中,我们可以在一个类中定义自己的事件,而其他的类可以注册该事件,当某些事情发生时,可以通知到该类.这对于桌面应用 ...
- 理解C# 4 dynamic(3) – DynamicObject的使用
上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...
- NodeJS写个爬虫，把文章放到kindle中阅读
这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...
- MapReduce剖析笔记之二：Job提交的过程
上一节以WordCount分析了MapReduce的基本执行流程,但并没有从框架上进行分析,这一部分工作在后续慢慢补充.这一节,先剖析一下作业提交过程. 在分析之前,我们先进行一下粗略的思考,如果要我 ...
- ASP.NET MVC学前篇之扩展方法、链式编程
ASP.NET MVC学前篇之扩展方法.链式编程 前言 目的没有别的,就是介绍几点在ASP.NETMVC 用到C#语言特性,还有一些其他琐碎的知识点,强行的划分一个范围的话,只能说都跟MVC有关,有的 ...
- ASP.NET MVC 路由(一)
ASP.NET MVC路由(一) 前言 从这一章开始,我们即将进入MVC的世界,在学习MVC的过程中在网上搜索了一下,资料还是蛮多的,只不过对于我这样的初学者来看还是有点难度,自己就想看到有一篇引导性 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (12) -----第三章 查询之使用SQL语句
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-2使用原生SQL语句更新 问题 你想在实体框架中使用原生的SQL语句,来更新底层 ...
- weblogic配置数据源
启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台 打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源 ...