cat package.json
{ "name": "reactapp", "version": "1.0.0", "descrWords": [], "author": "", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "webpack": "^2.2.1" }}cat webpack.config.js
var config = { entry: './main.js', output: { path: __dirname, filename: 'index.js', }, devServer: { inline: true, port: 3000, host: '0.0.0.0', }, module: { loaders: [{ test: //.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'], }, }], },};module.exports = config;cat index.html
<!DOCTYPE html><html> <head> <meta charset ="UTF-8"> </head> <title> react app</title> <body> <div id="app" ></div> <script src ="index.js"> </script></html>cat App.jsx
import React from "react";export default class App extends React.Component{render(){ return( <div> hello </div> );}}cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';ReactDOM.render(<App />,document.getElementById('app'));
1 獨(dú)立文件 cat helloworld_react.js
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));然后在 HTML 文件中引入該 JS 文件
<body> <div id="example"></div><script type="text/babel" src="helloworld_react.js"></script></body>javaScript 表達(dá)式 我們可以在 JSX 中使用 Javascript 表達(dá)式。表達(dá)式寫在花括號 {} 中
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運(yùn)算) 表達(dá)式來替代。以下實(shí)例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.
ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));樣式 React 推薦使用內(nèi)聯(lián)樣式。我們可以使用 camelCase 語法來設(shè)置內(nèi)聯(lián)樣式. React 會在指定元素數(shù)字后自動添加 px 。以下實(shí)例演示了為 h1 元素添加 myStyle 內(nèi)聯(lián)樣式：
var myStyle = { fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById('example'));4注釋 注釋需要寫在花括號中，實(shí)例如下：
ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*注釋...*/} </div>, document.getElementById('example'));5數(shù)組 JSX 允許在模板中插入數(shù)組，數(shù)組會自動展開所有成員：
var arr = [ <h1>菜鳥教程</h1>, <h2>學(xué)的不僅是技術(shù)，更是夢想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));6HTML 標(biāo)簽 vs. React 組件 React 可以渲染 HTML 標(biāo)簽 (strings) 或 React 組件 (classes)。 要渲染 HTML 標(biāo)簽，只需在 JSX 里使用小寫字母的標(biāo)簽名。
var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));要渲染 React 組件，只需創(chuàng)建一個大寫字母開頭的本地變量。
var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));React 的 JSX 使用大、小寫的約定來區(qū)分本地組件的類和 HTML 標(biāo)簽。
如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對象,實(shí)例如下： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ render: function() { return <h1>Hello{this.props.name}</h1>; }});ReactDOM.render(<HelloMessage name="denny"/>,document.getElementById('app'));npm start 以上實(shí)例中 name 屬性通過 this.props.name 來獲取。
2復(fù)合組件 我們可以通過創(chuàng)建多個組件來合成一個組件，即把組件的不同功能點(diǎn)進(jìn)行分離。 以下實(shí)例我們實(shí)現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); }});var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); }});var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); }});ReactDOM.render( <WebSite name="菜鳥教程" site=" http://www.runoob.com" />, document.getElementById('app'));React 把組件看成是一個狀態(tài)機(jī)（State Machines）。通過與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。 React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。 以下實(shí)例中創(chuàng)建了 LikeButton 組件，getInitialState 方法用于定義初始狀態(tài)，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當(dāng)用戶點(diǎn)擊組件，導(dǎo)致狀態(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動調(diào)用 this.render 方法，再次渲染組件。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var LikeButton = React.createClass({ getInitialState: function(){ return {liked: false};//這里為啥不是() }, handleClick:function(event){ this.setState({liked:!this.state.liked}); }, render:function(){ var text = this.state.liked?'喜歡':'不喜歡'; return( <p onClick={this.handleClick}> 你<b>{text}</b>我， 點(diǎn)我換狀態(tài) </p> ); }});ReactDOM.render( <LikeButton />, document.getElementById('app'));state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 props 來傳遞數(shù)據(jù)。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ render:function(){ return<h1> hi,{this.props.name}</h1>; }});ReactDOM.render( <HelloMessage name ="denny" />, document.getElementById('app'));你可以通過 getDefaultProps() 方法為 props 設(shè)置默認(rèn)值，實(shí)例如下： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ getDefaultProps: function(){ return{ name:'denny' }; },render:function(){ return<h1> hello,{this.props.name}</h1>;}});ReactDOM.render( <HelloMessage />, document.getElementById('app'));State 和 Props 以下實(shí)例演示了如何在應(yīng)用中組合使用 state 和 props 。我們可以在父組件中設(shè)置 state， 并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數(shù)中, 我們設(shè)置 name 和 site 來獲取父組件傳遞過來的數(shù)據(jù)。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var WebSite = React.createClass({ getInitialState: function(){ return { name:"菜", site:"http://www.baidu.com" }; }, render:function(){ return( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> );}});var Name = React.createClass({ render: function(){ return( <h1> {this.props.name}</h1> ); }});var Link = React.createClass({ render: function(){ return( <a href ={this.props.site}> <h1> {this.props.site}</h1> </a> ); }});ReactDOM.render( <WebSite />, document.getElementById('app'));Props 驗證 Props 驗證使用 propTypes，它可以保證我們的應(yīng)用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據(jù)是否有效。當(dāng)向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告。 以下實(shí)例創(chuàng)建一個 Mytitle 組件，屬性 title 是必須的且是字符串，如果是一個數(shù)字則會報錯 ： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var title = "教程";//var title = 123;var MyTitle = React.createClass({ propTypes:{ title:React.PropTypes.string.isRequired, }, render:function(){ return<h1> {this.props.title}</h1>; }});ReactDOM.render( <MyTitle title={title} />, document.getElementById('app'));7個方法: 設(shè)置狀態(tài)：setState 替換狀態(tài)：replaceState 設(shè)置屬性：setProps 替換屬性：replaceProps 強(qiáng)制更新：forceUpdate 獲取DOM節(jié)點(diǎn)：findDOMNode 判斷組件掛載狀態(tài)：isMounted
關(guān)于setState 不能在組件內(nèi)部通過this.state修改狀態(tài)，因為該狀態(tài)會在調(diào)用setState()后被替換。 setState()并不會立即改變this.state，而是創(chuàng)建一個即將處理的state。setState()并不一定是同步的，為了提升性能React會批量執(zhí)行state和DOM渲染。 setState()總是會觸發(fā)一次組件重繪，除非在shouldComponentUpdate()中實(shí)現(xiàn)了一些條件渲染邏輯。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Counter = React.createClass({ getInitialState:function(){ return{clickCount:0}; }, handleClick:function(){ this.setState(function(state){ return{clickCount:state.clickCount +1}; }); }, render:function(){ return(<h2 onClick={this.handleClick}>點(diǎn)我，點(diǎn)擊次數(shù)為:{this.state.clickCount}</h2>); }});ReactDOM.render( <Counter />, document.getElementById('app'));replaceState(object nextState[, function callback]) nextState，將要設(shè)置的新狀態(tài)，該狀態(tài)會替換當(dāng)前的state。 callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceState設(shè)置成功，且組件重新渲染后調(diào)用。 replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會被刪除。
setProps(object nextProps[, function callback]) nextProps，將要設(shè)置的新屬性，該狀態(tài)會和當(dāng)前的props合并 callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setProps設(shè)置成功，且組件重新渲染后調(diào)用。 設(shè)置組件屬性，并重新渲染組件。 props相當(dāng)于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中。當(dāng)和一個外部的JavaScript應(yīng)用集成時，我們可能會需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染，可以使用setProps()。 更新組件，我可以在節(jié)點(diǎn)上再次調(diào)用React.render()，也可以通過setProps()方法改變組件屬性，觸發(fā)組件重新渲染。
replaceProps()方法與setProps類似，但它會刪除原有props
forceUpdate()方法會使組件調(diào)用自身的render()方法重新渲染組件，組件的子組件也會調(diào)用自己的render()。但是，組件重新渲染時，依然會讀取this.props和this.state，如果狀態(tài)沒有改變，那么React只會更新DOM。 forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過該方法通知React需要調(diào)用render() 一般來說，應(yīng)該盡量避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態(tài)并由React觸發(fā)render()調(diào)用。
DOMElement findDOMNode() 返回值：DOM元素DOMElement 如果組件已經(jīng)掛載到DOM中，該方法返回對應(yīng)的本地瀏覽器 DOM 元素。當(dāng)render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。
bool isMounted() 返回值：true或false，表示組件是否已掛載到DOM中 isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場景下的調(diào)用不會出錯。
組件的生命周期可分成三個狀態(tài)： Mounting：已插入真實(shí) DOM Updating：正在被重新渲染 Unmounting：已移出真實(shí) DOM 生命周期的方法有： componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端。 componentDidMount : 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送Ajax請求等操作(防止異部操作阻塞UI)。 componentWillReceiveProps 在組件接收到一個新的prop時被調(diào)用。這個方法在初始化render時不會被調(diào)用。 shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。 可以在你確認(rèn)不需要更新組件時使用。 componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。 componentDidUpdate 在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。 componentWillUnmount在組件從 DOM 中移除的時候立刻被調(diào)用。 這些方法的詳細(xì)說明，可以參考官方文檔。 以下實(shí)例在 Hello 組件加載以后，通過 componentDidMount 方法設(shè)置一個定時器，每隔100毫秒重新設(shè)置組件的透明度，并重新渲染： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Hello = React.createClass({ getInitialState:function(){ return{ opacity:1.0 }; }, componentDidMount:function(){ this.timer = setInterval(function(){ var opacity = this.state.opacity; opacity -= .05; if(opacity<0.1){ opacity = 1.0 } this.setState({ opacity:opacity }); }.bind(this),100); }, render:function(){ return( <div style={{opacity:this.state.opacity}}> hello {this.props.name} </div> ); }});ReactDOM.render( <Hello name="world" />, document.getElementById('app'));以下實(shí)例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 組件中。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Button = React.createClass({ getInitialState:function(){ return{ data:0 }; }, setNewNumber:function(){ this.setState({data:this.state.data+1}) }, render:function(){ return( <div> <button onClick = {this.setNewNumber}> INCREMENT</button> <Content myNumber = {this.state.data}></Content> </div> ); }});var Content = React.createClass({ componentWillMount:function(){ console.log('Component will mount'); }, componentDidMount:function(){ console.log('component did mount'); }, componentWillReceiveProps:function(newProps){ console.log('component will receive props'); }, shouldComponentUpdate:function(newProps, newState) { return true; }, componentWillUpdate:function(nextProps,nextState){ console.log('component will update'); }, componentDidUpdate:function(prevProps,prevState){ console.log('component did update'); }, componentWillUnmount:function(){ console.log('component will unmount'); }, render:function(){ return( <div> <h3> {this.props.myNumber}</h3> </div> ); }});ReactDOM.render( <div> <Button /> </div>, document.getElementById('app'));React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取，當(dāng)從服務(wù)端獲取數(shù)據(jù)庫可以將數(shù)據(jù)存儲在 state 中，再用 this.setState 方法重新渲染 UI。 當(dāng)使用異步加載數(shù)據(jù)時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。 以下實(shí)例演示了獲取 Github 用戶最新 gist 共享描述: [執(zhí)行不了】Uncaught ReferenceError: mountNode is not defined cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.username} 用戶最新的 Gist 共享地址： <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); }});ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode);在實(shí)例中我們設(shè)置了輸入框 input 值value = {this.state.data}。在輸入框值發(fā)生變化時我們可以更新 state。我們可以使用 onChange 事件來監(jiān)聽 input 的變化，并修改 state。 cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ getInitialState: function() { return { value:'hello denny' }; },handleChange:function(event){ this.setState({value:event.target.value});//這個還要好好學(xué)學(xué)}, render: function() { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div> ); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));上面的代碼將渲染出一個值為 Hello Runoob! 的 input 元素，并通過 onChange 事件響應(yīng)更新用戶輸入的值。
在以下實(shí)例中我么將為大家演示如何在子組件上使用表單。 onChange 方法將觸發(fā) state 的更新并將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面。 你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。
cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Content = React.createClass({ render:function(){ return(<div> <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> <h4> {this.props.myDataProp}</h4> </div> ); }});var HelloMessage = React.createClass({ getInitialState: function() { return { value:'hello denny' }; },handleChange:function(event){ this.setState({value:event.target.value});}, render: function() { var value = this.state.value; return ( <div> <Content myDataProp={value} updateStateProp = {this.handleChange}></Content> </div> ); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));以下實(shí)例演示通過 onClick 事件來修改數(shù)據(jù)： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';// var Content = React.createClass({// render:function(){// return(<div>// <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}// />// <h4> {this.props.myDataProp}</h4>// </div>// );// }// });var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello Runoob!'}; }, handleChange: function(event) { this.setState({value: '菜鳥教程'}) }, render: function() { var value = this.state.value; return (<div> <button onClick={this.handleChange}>點(diǎn)我</button> <h4>{value}</h4> </div>); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));當(dāng)你需要從子組件中更新父組件的 state 時，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。實(shí)例如下： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Content = React.createClass({ render:function(){ return( <div> <button onClick = {this.props.updateStateProp}>點(diǎn)我</button> <h4>{this.props.myDataProp} </h4> </div> ); }});var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello Runoob!'}; }, handleChange: function(event) { this.setState({value: '菜鳥教程'}) }, render: function() { var value = this.state.value; return (<div> <Content myDataProp ={value} updateStateProp ={this.handleChange}></Content> </div>); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。 這個特殊的屬性允許你引用 render() 返回的相應(yīng)的支撐實(shí)例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實(shí)例。
你可以通過使用 this 來獲取當(dāng)前 React 組件，或使用 ref 來獲取組件的引用，實(shí)例如下： cat main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var MyComponent = React.createClass({ handleClick:function(){ //使用原生的DOM API得到焦點(diǎn) this.refs.myInput.focus(); }, render:function(){ //當(dāng)組件插入到DOM后，ref屬性添加一個組件的引用到this.refs return( <div> <input type="text" ref="myInput" /> <input type="button" value="點(diǎn)我輸入框獲取焦點(diǎn)" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <div> <MyComponent /> </div>, document.getElementById('app'));實(shí)例中，我們獲取了輸入框的支撐實(shí)例的引用，子點(diǎn)擊按鈕后輸入框獲取焦點(diǎn)。 我們也可以使用 getDOMNode()方法獲取DOM元素
新聞熱點(diǎn)
疑難解答
