从 React到React Native
React简介
RN基于React设计，了解React有利于我们开发RN应用。
React希望功能分解化，让开发像搭积木一样，快速而且可维护。
React的3个特点
- 作为UI（Just the UI）
- 虚拟DOM(Virtual DOM)
这是亮点,是React最重要的一个特性
更新View很快，放进内存,最小更新的视图
差异部分更新 diff算法 - 数据（Data Flow）单向数据流
学习React要掌握的只是：
- JSX语法 类似XML
- ES6相关
- 前端基础 CSS+DIV JS
举例说明React的用法，IDE工具：WebStorm(JavaScript 开发工具 Web前端开发神器 插件很丰富,智能代码提示，自动补全)
比如：ReactNative 代码智能提醒（Webstorm）
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTempate
下载模板：https://github.com/wix/react-templates
安装命令：npm install react-templates -g
例子
1.例子一 （简单组件和数据传递） 使用this.props 指向自己的属性
从http://facebook.github.io/react/downloads.html 下载react Kit
react.js react-dom.js：React 的核心文件
JSXTransformer.js browser.min.js：讲JSX转译成js和html的工具
最新的react版本：react-15.3.1
在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后，这个依赖的库改为browser.js，页面script标签的type也由text/jsx改为text/babel 但是以上只能用来测试学习react
生产环境需要借助编译工具事先将jsx编译成js
例如可以使用Node.js做预编译，可以安装react-tools工具
npm install -g react-tools
例子源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass(
{
render:function(){
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是星空守候</h1>;
//这是注释 React.createElement
}
}
);
ReactDOM.render(<HelloMessage name="React 语法基础" /> ,document.getElementById('example'));
</script>
</body>
</html>2.例子二 （通过this.state更新视图）
源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第二个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/*自定义组件*/
var Timer=React.createClass(
{
/*初始状态*/
getInitialState:function(){
return {secondsElapsed:0};
},
tick:function(){
this.setState({secondsElapsed:this.state.secondsElapsed+1});
},
/*组件完成装载*/
componentDidMount:function(){
this.interval=setInterval(this.tick,1000);
},
/*组件将被卸载 清除定时器*/
componentWillUnmount:function(){
clearInterval(this.interval);
},
/*渲染视图*/
render:function(){
return(
<div> Seconds Elapsed:{this.state.secondsElapsed} </div>
);
}
}
);
React.render( <Timer /> ,document.getElementById('example'));
</script>
</body>
</html>
3.例子三 （简单应用）
源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第三个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor=React.createClass(
{
getInitialState:function(){
return {value:'你可以在这里输入文字'};
},
handleChange:function(){
this.setState({value:React.findDOMNode(this.refs.textarea).value});
},
render:function(){
return (
<div>
<h3>输入</h3>
<textarea style={{width:300,height:150,outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}
/>
<h3>输出</h3>
<div> {this.state.value} </div>
</div>
);
}
}
);
React.render(<ShowEditor />,document.getElementById('example'));
</script>
</body>
</html>React Native简介与代码分析
为什么要使用React Native，如何在开发成本和用户体验做到更好的平衡？
很多时候，前端都有一种乐观的想法：H5可以替代原生应用，RN不仅可以使用前端开发的模式来开发应用，还能调用原生应用的UI组件和API。