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开始 消息传递的更多相关文章

  1. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  2. React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...

  3. 盘点 React 16.0 ~ 16.5 主要更新及其应用

    目录 0. 生命周期函数的更新 1. 全新的 Content API 2. React Strict Mode 3. Portal 4. Refs 5. Fragment 6. 其他 7. 总结 生命 ...

  4. 新手级配置 react react-router4.0 redux fetch sass

    前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...

  5. react native 0.55.4 rctsrwebsocket会崩溃的问题解决 直接原文覆盖

    //// Copyright 2012 Square Inc.//// Licensed under the Apache License, Version 2.0 (the "Licens ...

  6. react native 0.50与OC交互 && Swift与RN交互

    新公司也打算做rn,还是得捡起来再度学习.开撸! react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑. 首先上npm版本,re ...

  7. 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 ...

  8. 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 ...

  9. React Native - 0序言

    1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...

随机推荐

  1. C与C++

    有幸在某网站发现这篇文章,读罢,觉得蛮有道理,发来大家一起共勉之! 总是被同学们问到,如何学习C和C++才不茫然,才不是乱学,想了一下,这里给出一个总的回复. 一家之言,欢迎拍砖哈. 1.可以考虑先学 ...

  2. section 模块页面切换代码

    <div class="blockcode"><blockquote><!DOCTYPE html><html><head&g ...

  3. 前端-mate讲解

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. & ...

  4. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...

  5. mac/linux install hg

    MAC OSX 10.9: sudo port -v install mercurial or easy_install mercurial

  6. thinkphp框架开启页面gzip压缩

    Thinkphp下开启gzip压缩很简单,不管你是哪个版本,只要在你的入口文件index.PHP中加入以下两行,如果你的服务器支持,那么就OK了. define ( "GZIP_ENABLE ...

  7. sysstat服务负载统计,如CPU占有率,网络使用率,磁盘速度

    sysstat服务负载统计,如CPU占有率,网络使用率,磁盘速度

  8. 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 ...

  9. UVA 400 Unix ls by sixleaves

    题目其实很简单,答题意思就是从管道读取一组文件名,并且按照字典序排列,但是输入的时候按列先输出,再输出行.而且每一行最多60个字符.而每个文件名所占的宽度为最大文件名的长度加2,除了输出在最右边的文件 ...

  10. [Linux] rlwrap - 解决Linux下sqlplus退格、上翻键乱码问题

    在Linux下使用sqlplus你会发现:退格键无法正常使用(乱码),上翻键也无法正常显示历史功能,非常讨厌! 为了让退格键和上翻键在sqlplus里正常发挥它的作用,我们必须安装一个软件 - rlw ...