學習react教程

網址收藏: React官網React的GithubReact的中文文檔javascript

1.react是什麼?

React起源於Facebook的內部項目,由於該公司對市場上全部的Javascript MVC框架都不滿意,決定本身寫一套,用來架設Instargm的網站。作完之後,發現很好用,就在2013年5月開源。html

2.安裝react

  • 全局安裝react腳手架工具npm install create-react-app -g
  • 安裝阮一峯老師的教程 git clone git@github.com:ruanyf/react-demos.git下載下來

3.react特性

重點:組件,狀態 核心: 狀態java

4.語法。

4.1 html模板

<!DOCTYPE html>
<html>
  <head>
    <!-- 這是核心js -->
    <script src="../build/react.js"></script>
    <!-- 這是處理虛擬dom相關的js -->
    <script src="../build/react-dom.js"></script>
    <!-- 這是把JSX語法轉換爲js語法 (注意:JSX就是能夠把html寫在js裏面。) -->
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 這裏加type就是告訴遊覽器,這裏使用的是JSX語法模板。 -->
    <script type="text/babel"> //這裏寫 </script>
  </body>
</html>
複製代碼

4.2 ReactDOM.render()

React最基本的方法,用於把模板轉換成html語言,而且插入指定的節點。react

例如jquery

ReactDOM.render(
    <h2>Welcome to React World!</h2>,
    document.getElementById('myapp')
)
複製代碼

4.3 JSX語法

JSX是能夠在js中寫html,遇到html標籤(例如:<)就用html解析,遇到代碼塊(例如:{)就用javascript規則解析。git

例如:github

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="food"></div>
    <script type="text/babel"> var names = ['Alice', 'Emily', 'Kate']; var foods = ['meal','sala','milk']; ReactDOM.render( <div> { names.map(function (name, index) { return <div key={index}>Hello, {name}!</div> }) } </div>, document.getElementById('example') ); ReactDOM.render( <div> { foods.map(function (food, index) { return <div key={index}>I like eat {food}!</div> }) } </div>, document.getElementById('food') ) </script>
  </body>
</html>
複製代碼

4.4 組件 React.createClass()

React容許將代碼封裝成組件(component),而後把它當成html標籤插入到網頁中。React.createClass()就是能夠建立一個組建類。npm

例如:api

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var LikeFood = React.createClass({ //建立組件類 render: function() { return <p>I like eat <mark>{this.props.name}</mark></p>; } }); ReactDOM.render( <LikeFood name="Apple"/>, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

4.5 this.props.children

this.props對象的屬性與組件的屬性基本上是一致的,特殊在於this.props.children屬性,它表示組件的全部子節點。數組

注意: this.props.children有三個可能,若是當前組件沒有子節點,就是顯示undefined;若是有一個子節點,數據類型就是object;若是有多個子節點,就是array,因此要當心。 但React提供了一個方法遍歷全部子節點,React.Children,經過this.props.children來遍歷。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var FoodList = React.createClass({ render: function() { return ( <ul> { React.Children.map(this.props.children,function (child) { return <li>{child}</li>; }) } </ul> ) } }) ReactDOM.render( <FoodList> <span>Hello,</span> <span>I like eat</span> <span>Apple!</span> </FoodList>, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

4.6 PropTypes

組件的屬性能夠接受任何值,如字符串,數字,數組,對象,函數,可是須要一種機制來驗證使用組件提供的參數是否符合要求,PropTypes就是用來驗證這個的。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var str = 123; var MyNum = React.createClass({ propTypes: { num: React.PropTypes.number.isRequired, }, render: function() { return <h2>{this.props.num}</h2> } }); ReactDOM.render( <MyNum num={str} />, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

補充: 還能夠添加默認值。'

getDefaultProps: function() {
    return {
    num: 1818
    }
}
複製代碼

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var str; var MyNum = React.createClass({ getDefaultProps: function() { return { num: 1818 } } propTypes: { num: React.PropTypes.number.isRequired, }, render: function() { return <h2>{this.props.num}</h2> } }); ReactDOM.render( <MyNum num={str} />, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

4.7 獲取真實的DOM節點

組件並非真的dom節點,只是存在內存中的數據結構,叫作虛擬DOM(virtual)。當它插入到文檔之後,纔會變成真實的DOM。

全部的DOM變更,先是在虛擬DOM上發生變更,而後再在實際發生變更的部分,反映在真實的DOM,這種叫作DOM diff,它能夠極大提升網頁的性能表現。

有時須要從組件獲取真實的DOM的節點,這個時候就要用到ref屬性。

注意: React還支持許多事件,更多請訪問事件

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var MyFoods = React.createClass({ showContent: function() { this.refs.myFoodInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myFoodInput" /> <input type="button" value="自動聚焦" onClick={this.showContent} /> </div> ) } }) ReactDOM.render( <MyFoods />, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

4.8 this.state 狀態管理

組件免不了要和用戶互動,React的一大創新就是把組件當作是一個狀態機,一開始有個初始狀態,而後用戶互動,致使狀態變化,從而從新出發渲染UI。

注意getInitialState 方法用於定義初始狀態,但同時它是一個對象,這個能夠經過this.state屬性讀取。

當用戶點擊組件,致使狀態發生變化,this.setState 方法就會修改狀態值,每次修改完,會自動調用this.render方法,再次渲染組件。

this.propsthis.state都是描述組件的特性,可是不一樣的是this.props是指一旦定義好了,就再也不發生變化的特性,而this.state是會隨着用戶互動而產生變化的特性。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel"> var FoodButton = React.createClass({ getInitialState: function() { return {food: false}; }, callClick: function(event) { this.setState({food: !this.state.food}); }, render: function() { var text1 = this.state.food ? 'like eat apple' : 'hate eat apple'; return ( <p onClick={this.callClick}> You {text1}! </p> ); } }); ReactDOM.render( <FoodButton />, document.getElementById('foods') ) </script>
  </body>
</html>
複製代碼

4.9 表單

用戶在表單填入的內容,屬於用戶和組件之間的互動,因此不能用this.state,而要定義一個onChange事件的回調函數,經過event.target.value讀取用戶的值。

注意:textarea,select,radio都屬於這種狀況。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel"> var Food = React.createClass({ getInitialState: function() { return {val: 'Welcome to React!'}; }, hanChange: function(event) { this.setState({val:event.target.value}); }, render: function() { var val = this.state.val; return ( <div> <input type="text" value={val} onChange={this.hanChange} /> <p>{val}</p> </div> ); } }) ReactDOM.render(<Food />,document.getElementById('food')) </script>
  </body>
</html>
複製代碼

4.10 組件的生命週期

React中組件的生命週期分爲三個狀態,Mounting是已經插入真實DOM,Updating是正在被從新渲染,Unmounting是已移出真實DOM。

每一個狀態都有兩種處理函數,will函數是進入狀態以前,did函數是進入狀態以後,三種狀態共計五種函數。

注意:組件的樣式style不能寫成<div style={opacity: this.state.opacity}>,要寫成<div style={{opacity: this.state.opacity}}>

由於React組件樣式是個對象,因此第一個大括號表示Javascript語法,第二個大括號表示樣式對象。

五種函數

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentWillUpdate(object prevState, object prevState)
  • componentWillUnMount()

例如:第二種,在已插入真實DOM以後觸發。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel"> var Food = React.createClass({ getInitialState: function() { return { opacity: 0 } }, componentDidMount: function() { this.timer = setInterval(function() { var opacity = this.state.opacity; opacity += .05; if (opacity > 1) { opacity = 0; } this.setState({ opacity: opacity }) }.bind(this),100); }, render: function() { return ( <div style={{opacity: this.state.opacity}}> Hello, {this.props.title} </div> ); } }); ReactDOM.render( <Food title="apple"/>, document.getElementById('food') ) </script>
  </body>
</html>
複製代碼

4.11 Ajax的使用

組件的數據來源通常都是經過Ajax請求從服務器獲取,可使用componentDidMount()方法設置Ajax請求,等到請求成功,再用this.setState方法從新渲染UI。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel"> var ClientGits = React.createClass({ getInitialState: function() { return { id: '', addr: '' }; }, componentDidMount: function() { $.get(this.props.source,function (result) { var gits = result[0]; this.setState({ id: gits.id, addr: gits.git_pull_url }); }.bind(this)); }, render: function() { return ( <div> UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>! </div> ); } }); ReactDOM.render( <ClientGits source="https://api.github.com/users/octocat/gists" />, document.getElementById('food') ) </script>
  </body>
</html>
複製代碼

注意: 上面採用了jquery的Ajax,還能夠採用其餘的庫。咱們甚至能夠把Promise對象傳入組件。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="projects"></div>
    <script type="text/babel"> var Projects = React.createClass({ getInitialState: function() { return { loading: true, error: null, data: null }; }, componentDidMount() { this.props.promise.then( value => this.setState({loading: false, data: value}), error => this.setState({loading: false, error: error}) ) }, render: function() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error != null) { return <span>Error:{this.state.error.message}</span>; } else { var res = this.state.data.items; var resList = res.map(function (res,index) { return ( <li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li> ); }); return ( <main> <h1>Github上最受歡迎的JS項目</h1> <ul>{resList}</ul> </main> ); } } }); ReactDOM.render( <Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />, document.getElementById('projects') ) </script>
  </body>
</html>
複製代碼

之後還會總結一些有關react的知識點。

相關文章
相關標籤/搜索