手把手教你React Native實戰從 React到Rn《二》
阿新 • • 發佈：2019-01-25
React簡介
Rn是基於React的設計，瞭解 React有助於我們開發RN應用，React希望將功能分解華，讓開發變得像搭積木一樣，快速而且具有可維護性。
React主要有如下的3個特點：
* 作為UI（just the UI）
* 虛擬DOM（Virtural DOM）
這是亮點 是React最重要的一個特性，放進記憶體 最小更新的試圖
差異部分話更新 different演算法
* 資料流（Data Flow）單項資料流動
SO ，我們要掌握的知識點
* JSX語法，類似於xml ,Xxml
* ES6的相關知識
*前段基礎 CSS_DIV JS
舉例說明React的用法，IDE 工具：WebStorm(前段開發工具 JavaScript 問前段開發神奇， 外掛是非常的豐富的)
比如：ReactNative 程式碼智慧提醒（webstorm）
git clone Https://github.com/virtoolswebpalyer/ReactNative-LiveTemplate下載模板：https://github.com/wix/react-templates安裝命令：
npm install react-templates -g
1.例子（簡單的元件和資料傳遞）
使用this.props 指向自己的屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta 2.一個簡單的定時器
程式碼如下
<html>
<head>
<meta charset="utf-8">
<title>我的計時器</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 {secondElapsed: 0};
},
tick: function () {
this.setState({secondElapsed: this.state.secondElapsed + 1});
},
/**
* 組裝完成裝載
*/
componentDidMount: function () {
this.interval = setInterval(this.tick, 1000);
},
/**
* 元件江北解除安裝，清除定時器
*/
componentWillUnmount: function () {
clearInterval(this.interval);
},
/**
* 渲染師徒
*/
render: function () {
return (<div> Second
Elapsed:{
this.state.secondElapsed
}
</div>
) ;
},
}
);
ReactDOM.render(<Timer/>,document.getElementById('example'));
</script>
</body>
</html>3、監控文字框輸入輸出
程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字框輸入</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:"你可以在這裡面輸入文字"};
},
handChanged:function(){
this.setState({value:ReactDOM.findDOMNode(this.refs.textarea).value});
},
render:function(){
return(
<div>
<h3>輸入</h3>
<textarea style={{width:300,height:150,outline:'none'}}
onChange={this.handChanged}
ref="textarea"
defaultValue={this.state.value}
/>
<h3>輸出</h3>
<div>{this.state.value}</div>
</div>
);
}
});
ReactDOM.render(<ShowEditor />,document.getElementById("example"));
</script>
</body>
</html>為什麼要使用React Native?
如何在開發成本和使用者體驗上做的更好?
很多時候，前端有一種樂觀的想法：H5可以代替原生。RN不僅可以使用前端的東西來開發啊，而且還能呼叫原生的元件和API
更多
如果你覺得此文對您有所幫助，歡迎隨時撩我 。微信公眾號：終端研發部
