react學習筆記1

時間 2019-12-11

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

# 一、hello worldjavascript

學習一個語言，最好的方式，咱們須要去官網去查看文檔（https://facebook.github.io/react），經過JSFiddle,即可以看到最簡單的demo.
目前爲止最新版本爲15.3.0，後續沒有特別說明，咱們都是基於該版本。html

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>react</title>
　　<style>
　　　　.styleT{
　　　　　　color: #f40;
　　　　}
　　</style>
　　<script src="../build/react.js"></script>
　　<script src="../build/react-dom.js"></script>
　　<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
　　<div id="example"></div>
　　<script type="text/babel">

　　var Hello = React.createClass({
　　　　render:function(){
　　　　　　return <h1 className="styleT">Hello,{this.props.name}</h1>;
　　　　}
　　});
　　ReactDOM.render(
　　　　<Hello name="蒼老師" />,
　　　　document.getElementById("example")
　　);
　　</script>
</body>
</html>

須要注意的點：
+ 引入文件：當前版本須要引入react\react-dom\browser三個文件，版本不一樣，引入文件有出入。
　　- 問題來了，咱們browser的爲啥要用，文件這麼大？它的做用是使瀏覽器支持babel，你能夠使用ES2015（javascript下一代標準ECMAScript 6）進行編碼。若是你用ES5，能夠不引入。
+ ReactDOM.render該方法的兩個參數
　　- dom節點，(並非真正的dom節點，是個實例而已)須要注意的是class不在支持樣式，由於關鍵字的緣由，應該用className
　　- 須要插入的節點。
+ 傳參，「蒼老師」java

# 二、事件react

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Event</title>
　　<script src="../build/react.js"></script>
　　<script src="../build/react-dom.js"></script>
　　<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
　　<div id="main"></div>
　　<script type="text/babel">
　　　　var Btn=React.createClass({
　　　　　　render:function () {
　　　　　　　　return <div><button onClick={this.onClick}>顯示與隱藏</button>    <span ref="tip">看我消失～～!</span></div>;
　　　　　　},
　　　　　　onClick:function(evt){
　　　　　　　　var ele=ReactDOM.findDOMNode(this.refs.tip);
　　　　　　　　if(ele.style.display=="none"){
　　　　　　　　　　ele.style.display="inline";
　　　　　　　　}else{
　　　　　　　　　　ele.style.display="none";
　　　　　　　　}
　　　　　　}
　　　　});


　　　　var Ipt=React.createClass({
　　　　　　render:function (){
　　　　　　　　return （
　　　　　　　　　　<div>
　　　　　　　　　　　　<input onChange={this.onChange} /> 
　　　　　　　　　　　　<span ref="infoShadow">{this.state.inputVal}</span>
　　　　　　　　　　</div>
　　　　　　　　）;
　　　　　　},
　　　　　　onChange:function(evt){
　　　　　　　　this.setState({
　　　　　　　　　　inputVal:evt.target.value,
　　　　　　　　});
　　　　　　},
　　　　　　getInitialState:function(){
　　　　　　return {
　　　　　　　　inputVal:"默認的字符"
　　　　　　}
　　　　},
　　});

　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<Btn />
　　　　　　　　<br/><br/><br/><br/>
　　　　　　　　<Ipt />
　　　　　　</div>,
　　　　　　document.getElementById('main')
　　);
　　</script>
</body>
</html>

注意點：
+ type類型爲text/babel，而非text/JSX
+ 渲染React組件,聲明變量採用首字母大寫（老紙用小寫，踩坑了，半天死活沒效果，也不報錯）
+ React.createClass() 接受的參數爲對象，{ xxx }
+ 綁定事件爲 onXxx={this.fn}
+ 查找節點ReactDOM.findDOMNode
　　- 接受參數爲虛擬dom節點this.refs.xxx
　　- ref="xxx"(我暫時理解爲id)
+ 狀態
　　- 狀態初始化 getInitialState:fn(){return {xxx:"初始化"}}
　　- 改變狀態 setState({xxx:"改變後的狀態"})
+ 建立組件虛擬dom的結構，一行顯示爲一坨，很噁心
　　- 放在小括號內（虛擬dom...）注意接觸是分號git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。