瞭解相關更多技術，可參考《學習React Native必看的幾個開源專案》，接下來 我們來聊一聊相關的React。
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 指向自己的屬性
從http://facebook.github.io.react/downloads.html下載 react kit
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 我的react native 開發 </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>Hello{this.props.name}!卡卡羅特</h1>
}
});
ReactDOM.render(<HelloMessage ="react hello"/>,document.getElementById("example"));
</script >
<!--<div class="well" id="well">
</div>-->
</body>
</html>
複製程式碼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
更多
如果你覺得此文對您有所幫助，歡迎隨時撩我 。微信公眾號：終端研發部