React 从0开始 消息传递
React笔记
React 数据决定DOM
以往的做法是通过JS去操作DOM 将数据填充
JSX
Jsx javascript xml
HTML的结构组装到js中
jsx使用style的时候 不能直接使用style=""
而是通过{} 的方式
style={{width: this.state.ele_w, height: this.state.ele_h}}
React生命周期
每一个功能可以认为是一个React组件
不可变的设置为 property 可变的设置为state
一个组件就是一个状态机 各种状态都是根据state变化的
React声明周期分为三个阶段
Mounting 创建
Updating 更新
Unmouting 销毁
创建
当首次使用一个组件的时候 将会依次call下面的函数
getDefaultProps
getInitialState 设置state属性初始化值
componentWillMount 将要显示在页面的组件
Render 渲染Jsx的结构
compoonectDidMount render渲染完毕吧
非第一次使用这个组件 越过getDefaultProps这一步
更新
更新时依次触发下面的函数
componentWillReceiveProps 父组件属性变化
shouldComponentUpdate 针对不常改变的组件如需更新则在这个函数的返回值设置为false
componentWillUpdate 组件将要改变时调用(更新前调用)
render
componentDidUpdate 组件更新完成
componentWillUpdate 是使用最多的函数
在一个组建的props states 改变后调用
销毁
componentWillUnmount 组件即将销毁
setState replaceState不同
replaceState({})是将整个state都替换成{}中的内容
React 同构实践
SPA有什么不好的地方
典型的SPA都是由 js 渲染得到的 因此对于SEO并不友好
另外js的下载和执行需要时间
React可以同时在客户端和服务端渲染,解决了之前服务端 客户端逻辑重复 更新时容易有bug的问题
Babel 可以运行jsx 和 ES6
start
可以直接用script标签引入react.js 不过官方的推荐做法是结合browserify 或者 webpack 一起用 name我们还是使用官方推荐的做法吧
下面是一个检测文本框值变化的例子
react 针对onChange 事件做了优化 使input是有改动就触发的
而平常onchange只有改动了值且失去焦点后才触发
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
React.render(<Input/>, document.body);
React组件之间的消息传递
React各个组件之间的消息针对不同的情形 传递消息有很多种办法
父子组件消息传递
父 --> 子 直接通过props写入数据
子 --> 父 调用父组件的函数 将值传给父组件
var Container1, Inner1;
Container1 = React.createClass({
getInitialState: function(){
return {
val1: this.props.val1 ||'',
val2:''
}
},
setVal2Fn: function(value){
// console.log('te!!st',value);
this.setState({
val2:value
})
},
render: function(){
return (
<div class="container">
From inner is {this.state.val2}
<Inner1 val1={this.state.val1} setVal2Fn={this.setVal2Fn} />
</div>
)
}
});
Inner1 = React.createClass({
getInitialState: function(){
return {}
},
handleSubmit: function(e){
var target = e.target;
//prenode是寻找submit按钮之前的一个元素 也就是文本输入框
var prenode= (function(){
var node = target.previousSibling;
while(node.nodeType!=1){
node=node.previousSibling;
if(!node) return null;
};
return node;
})();
//调用父组件的函数 并将值以参数的形式传给父组件
this.props.setVal2Fn(prenode.value); //将值传给父组件
},
render:function(){
return (
<div>
From container is {this.props.val1}
<input type="text" ref="innerValue"/>
<button onClick={this.handleSubmit}>Submit</button>
</div>
)
}
})
同一个父组件内的子组件之间的消息传递
也就是借助父组件作为桥梁来传递数据
由于兄弟组件之间不能相互传递数据 所以数据都放在父组件中
数据的获取 由父组件传递给子组件
数据的更改 由父组件传递修改函数给子组件
var Container2, Inner2, Inner3;
Container2 = React.createClass({
getInitialState: function(){
return{
val3:'val3',
val2:'val2'
}
},
changeVal2: function(value){
this.setState({
val2: value
})
},
changeVal3: function(value){
this.setState({
val3: value
})
},
render: function(){
//本例子是Inner2 和 Inner3 之间的消息传递
//Inner2 的消息传给 Inner3 实际上就是传给父组件
//然后Inner3 使用的是父组件读取这个父组件的变量
return <div>
<Inner2 val2={this.state.val2} val3={this.state.val3}
changeVal3Fn={this.changeVal3}/>
<Inner3 val2={this.state.val2} val3={this.state.val3}
changeVal2Fn={this.changeVal2}/>
</div>
}
});
Inner2=React.createClass({
textChange: function(e){
var val = e.target.value;
this.props.changeVal3Fn(val);
},
render: function(){
return (
<div>
{this.props.val2}
<input type="text" onChange={this.textChange} />
</div>
)
}
});
Inner3 = React.createClass({
textChange: function(e){
var val = e.target.value;
this.props.changeVal2Fn(val);
},
render: function(){
return (
<div>
{this.props.val3}
<input type="text" onChange={this.textChange} />
</div>
)
}
});
全局通信
Inner4 Inner5之间通信 直接改变两个子组件的上下文环境 都直接指向父组件
那么两个子组件就能直接访问父组件的变量
var Container3, Inner4,Inner5;
Container3 = React.createClass({
getInitialState: function(){
return{
val:'val'
}
},
childContextTypes: {
val: React.PropTypes.any,
changeValFn: React.PropTypes.any
},
//设置子组件的val和changeValFn对象的上下文
getChildContext: function(){
return {
val: this.state.val,
changeValFn: this.changeValFn
}
},
changeValFn: function(e){
console.log('val' ,e.target.value);
this.setState({
val: e.target.value
})
},
render: function(){
return <div>
<Inner4 val={this.state.val}
changeValFn={this.changeValFn}/>
</div>
}
});
Inner4 = React.createClass({
contextTypes: {
val: React.PropTypes.any,
changeValFn:React.PropTypes.any
},
render: function(){
return (
<div>
-- { this.context.val } --
<input onChange={this.context.changeValFn} />
</div>
)
}
});
使用事件 订阅发布模式
如果觉得前面的方式太过于繁琐, 可以使用这个模式, 它的逻辑独立在React组件之外 官方也建议使用这种模式来处理(特别是嵌套层次较深的组件之间的消息传递)
//使用PubSub 订阅发布模式来处理消息传递
//在一个组件ComponentDidMount函数触发后就绑定
var Container4, Container5;
var messagePubSub = new PubSub();
var MSGCHANGED = 'msg_changed';
Container4 = React.createClass({
getInitialState: function(){
return {
text: 'default'
}
},
componentDidMount: function(){
messagePubSub.addEvent(MSGCHANGED, this.msgHandler);
},
msgHandler: function(value){
console.log('test', value);
this.setState({
text:value
})
},
render: function(){
return (
<div>
-- {this.state.text} --
</div>
)
}
});
Container5 = React.createClass({
changeHandler: function(e){
messagePubSub.fireEvent(MSGCHANGED, null, e.target.value);
},
render: function(){
return (
<div>
<input class="container5-input" onChange={this.changeHandler}/>
</div>
)
}
});
React 从0开始 消息传递的更多相关文章
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...
- React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...
- 盘点 React 16.0 ~ 16.5 主要更新及其应用
目录 0. 生命周期函数的更新 1. 全新的 Content API 2. React Strict Mode 3. Portal 4. Refs 5. Fragment 6. 其他 7. 总结 生命 ...
- 新手级配置 react react-router4.0 redux fetch sass
前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...
- react native 0.55.4 rctsrwebsocket会崩溃的问题解决 直接原文覆盖
//// Copyright 2012 Square Inc.//// Licensed under the Apache License, Version 2.0 (the "Licens ...
- react native 0.50与OC交互 && Swift与RN交互
新公司也打算做rn,还是得捡起来再度学习.开撸! react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑. 首先上npm版本,re ...
- react native 0.56.0版本在windows下有bug不能正常运行
react native的0.56.0版本在windows下有bug不能正常运行请init 0.55.4的版本 react-native init MyApp --version 0.55.4 注意v ...
- React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)
当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...
- React Native - 0序言
1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...
随机推荐
- C与C++
有幸在某网站发现这篇文章,读罢,觉得蛮有道理,发来大家一起共勉之! 总是被同学们问到,如何学习C和C++才不茫然,才不是乱学,想了一下,这里给出一个总的回复. 一家之言,欢迎拍砖哈. 1.可以考虑先学 ...
- section 模块页面切换代码
<div class="blockcode"><blockquote><!DOCTYPE html><html><head&g ...
- 前端-mate讲解
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. & ...
- 纯CSS3技术 加载中
你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html <div class="loader">加载中...</div> css: 图( ...
- mac/linux install hg
MAC OSX 10.9: sudo port -v install mercurial or easy_install mercurial
- thinkphp框架开启页面gzip压缩
Thinkphp下开启gzip压缩很简单,不管你是哪个版本,只要在你的入口文件index.PHP中加入以下两行,如果你的服务器支持,那么就OK了. define ( "GZIP_ENABLE ...
- sysstat服务负载统计,如CPU占有率,网络使用率,磁盘速度
sysstat服务负载统计,如CPU占有率,网络使用率,磁盘速度
- Node.js log3:create ejs engine and jade engine
The base condition is ensure that you have installed express. 1.create ejs engine Using windows d ...
- UVA 400 Unix ls by sixleaves
题目其实很简单,答题意思就是从管道读取一组文件名,并且按照字典序排列,但是输入的时候按列先输出,再输出行.而且每一行最多60个字符.而每个文件名所占的宽度为最大文件名的长度加2,除了输出在最右边的文件 ...
- [Linux] rlwrap - 解决Linux下sqlplus退格、上翻键乱码问题
在Linux下使用sqlplus你会发现:退格键无法正常使用(乱码),上翻键也无法正常显示历史功能,非常讨厌! 为了让退格键和上翻键在sqlplus里正常发挥它的作用,我们必须安装一个软件 - rlw ...