使用 create-react-app 快速構(gòu)建 React 開發(fā)環(huán)境
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
項目的目錄結(jié)構(gòu)如下：
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
React JSX
你的 React JSX 代碼可以放在一個獨立文件上，例如我們創(chuàng)建一個 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>
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鳥教程</h1>,
document.getElementById('example')
);
var arr = [
<h1>菜鳥教程</h1>,
<h2>學的不僅是技術(shù)叫搁，更是夢想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中
在 JSX 中不能使用 if else 語句政供，但可以使用 conditional (三元運算) 表達式來替代
注釋需要寫在花括號中
要渲染 HTML 標簽趟紊，只需在 JSX 里使用小寫字母的標簽名;要渲染 React 組件，只需創(chuàng)建一個大寫字母開頭的本地變量
React 組件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World效诅！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
React.createClass 方法用于生成一個組件類 HelloMessage胀滚。<HelloMessage /> 實例組件類并輸出信息趟济。
注意，原生 HTML 元素名以小寫字母開頭咽笼，而自定義的 React 類名以大寫字母開頭顷编，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽剑刑，否則也會報錯媳纬。
如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對象,實例如下：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
以上實例中 name 屬性通過 this.props.name 來獲取施掏。
注意钮惠，在添加屬性時， class 屬性需要寫成 className 其监，for 屬性需要寫成 htmlFor 萌腿，這是因為 class 和 for 是 JavaScript 的保留字。
復合組件
我們可以通過創(chuàng)建多個組件來合成一個組件抖苦，即把組件的不同功能點進行分離毁菱。
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('example')
);
實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應(yīng)的信息，也就是說 WebSite 擁有 Name 和 Link 的實例锌历。
React State(狀態(tài))
(React 把組件看成是一個狀態(tài)機（State Machines）贮庞，通過與用戶的交互，實現(xiàn)不同狀態(tài)究西，然后渲染 UI窗慎，讓用戶界面和數(shù)據(jù)保持一致，只需更新組件的 state卤材，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）)
getInitialState 方法用于定義初始狀態(tài)遮斥，也就是一個對象，這個對象可以通過 this.state 屬性讀取扇丛。當用戶點擊組件术吗，導致狀態(tài)變化，this.setState 方法就修改狀態(tài)值帆精，每次修改以后较屿，自動調(diào)用 this.render 方法，再次渲染組件.
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>我卓练。點我切換狀態(tài)隘蝎。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
React Props
state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變襟企。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)嘱么。 而子組件只能通過 props 來傳遞數(shù)據(jù)。
使用 Props
以下實例演示了如何在組件中使用 props：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
實例中 name 屬性通過 this.props.name 來獲取顽悼。
默認 Props
你可以通過 getDefaultProps() 方法為 props 設(shè)置默認值拱撵，實例如下：
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
State 和 Props
我們可以在父組件中設(shè)置 state辉川， 并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數(shù)中, 我們設(shè)置 name 和 site 來獲取父組件傳遞過來的數(shù)據(jù)拴测。
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "菜鳥教程",
site: "http://www.runoob.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}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
Props 驗證
Props 驗證使用 propTypes，它可以保證我們的應(yīng)用組件被正確使用府蛇，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據(jù)是否有效集索。當向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告汇跨。
以下實例創(chuàng)建一個 Mytitle 組件务荆，屬性 title 是必須的且是字符串，非字符串類型會自動轉(zhuǎn)換為字符串 ：
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('example')
);
更多驗證器說明如下：
React.createClass({
propTypes: {
// 可以聲明 prop 為指定的 JS 基本數(shù)據(jù)類型穷遂，默認情況函匕，這些數(shù)據(jù)是可選的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的對象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符聲明 prop 為類的實例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 來限制 prop 只接受指定的值蚪黑。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多個對象類型中的一個
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定類型組成的數(shù)組
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定類型的屬性構(gòu)成的對象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 參數(shù)的對象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意類型加上 `isRequired` 來使 prop 不可空盅惜。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意類型
requiredAny: React.PropTypes.any.isRequired,
// 自定義驗證器。如果驗證失敗需要返回一個 Error 對象忌穿。不要直接使用 `console.warn` 或拋異常抒寂，因為這樣 `oneOfType` 會失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
React 組件 API
設(shè)置狀態(tài)：setState
替換狀態(tài)：replaceState
設(shè)置屬性：setProps
替換屬性：replaceProps
強制更新：forceUpdate
獲取DOM節(jié)點：findDOMNode
判斷組件掛載狀態(tài)：isMounted
設(shè)置狀態(tài):setState
setState(object nextState[, function callback])
- 參數(shù)說明
- nextState掠剑，將要設(shè)置的新狀態(tài)屈芜，該狀態(tài)會和當前的state合并
- callback，可選參數(shù)朴译，回調(diào)函數(shù)井佑。該函數(shù)會在setState設(shè)置成功，且組件重新渲染后調(diào)用眠寿。
合并nextState和當前state躬翁，并重新渲染組件。setState是React事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法澜公。
關(guān)于setState
1. 不能在組件內(nèi)部通過this.state修改狀態(tài)姆另，因為該狀態(tài)會在調(diào)用setState()后被替換。
2. setState()并不會立即改變this.state坟乾，而是創(chuàng)建一個即將處理的state迹辐。setState()并不一定是同步的，為了提升性能React會批量執(zhí)行state和DOM渲染甚侣。
3. setState()總是會觸發(fā)一次組件重繪明吩，除非在shouldComponentUpdate()中實現(xiàn)了一些條件渲染邏輯。
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}>點我殷费！點擊次數(shù)為: {this.state.clickCount}</h2>);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('message')
);
實例中通過點擊 h2 標簽來使得點擊計數(shù)器加 1印荔。
替換狀態(tài)：replaceState
replaceState(object nextState[, function callback])
- nextState低葫，將要設(shè)置的新狀態(tài)，該狀態(tài)會替換當前的state仍律。
- callback嘿悬，可選參數(shù)，回調(diào)函數(shù)水泉。該函數(shù)會在replaceState設(shè)置成功善涨，且組件重新渲染后調(diào)用。
replaceState()方法與setState()類似草则，但是方法只會保留nextState中狀態(tài)钢拧，原state不在nextState中的狀態(tài)都會被刪除。
設(shè)置屬性：setProps
setProps(object nextProps[, function callback])
- nextProps炕横，將要設(shè)置的新屬性源内，該狀態(tài)會和當前的props合并
- callback，可選參數(shù)份殿，回調(diào)函數(shù)膜钓。該函數(shù)會在setProps設(shè)置成功，且組件重新渲染后調(diào)用伯铣。
設(shè)置組件屬性呻此，并重新渲染組件。props相當于組件的數(shù)據(jù)流腔寡，它總是會從父組件向下傳遞至所有的子組件中焚鲜。當和一個外部的JavaScript應(yīng)用集成時，我們可能會需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染放前，可以使用setProps()忿磅。更新組件，我可以在節(jié)點上再次調(diào)用React.render()凭语，也可以通過setProps()方法改變組件屬性葱她，觸發(fā)組件重新渲染。
替換屬性：replaceProps
replaceProps(object nextProps[, function callback])
- nextProps似扔，將要設(shè)置的新屬性吨些，該屬性會替換當前的props。
- callback炒辉，可選參數(shù)豪墅，回調(diào)函數(shù)。該函數(shù)會在replaceProps設(shè)置成功黔寇，且組件重新渲染后調(diào)用偶器。
replaceProps()方法與setProps類似，但它會刪除原有props
強制更新：forceUpdate
forceUpdate([function callback])
參數(shù)說明
- callback，可選參數(shù)屏轰，回調(diào)函數(shù)颊郎。該函數(shù)會在組件render()方法調(diào)用后調(diào)用。
- 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)用。
獲取DOM節(jié)點：findDOMNode
DOMElement findDOMNode()
返回值：DOM元素DOMElement
如果組件已經(jīng)掛載到DOM中获茬，該方法返回對應(yīng)的本地瀏覽器 DOM 元素港庄。當render返回null 或 false時，this.findDOMNode()也會返回null恕曲。從DOM 中讀取值的時候鹏氧，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作佩谣。
判斷組件掛載狀態(tài)：isMounted
bool isMounted()
返回值：true或false把还，表示組件是否已掛載到DOM中
isMounted()方法用于判斷組件是否已掛載到DOM中∪准螅可以使用該方法保證了setState()和forceUpdate()在異步場景下的調(diào)用不會出錯吊履。
React 組件生命周期
組件的生命周期可分成三個狀態(tài)：
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
生命周期的方法有：
componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端。
componentDidMount : 在第一次渲染后調(diào)用调鬓，只在客戶端艇炎。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進行訪問腾窝。 如果你想和其他JavaScript框架一起使用缀踪，可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。
componentWillReceiveProps 在組件接收到一個新的prop時被調(diào)用虹脯。這個方法在初始化render時不會被調(diào)用驴娃。
shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調(diào)用归形。在初始化時或者使用forceUpdate時不被調(diào)用托慨。
可以在你確認不需要更新組件時使用。
componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用暇榴。在初始化時不會被調(diào)用厚棵。
componentDidUpdate 在組件完成更新后立即調(diào)用蕉世。在初始化時不會被調(diào)用。
componentWillUnmount在組件從 DOM 中移除的時候立刻被調(diào)用婆硬。
以下實例在 Hello 組件加載以后狠轻，通過 componentDidMount 方法設(shè)置一個定時器，每隔100毫秒重新設(shè)置組件的透明度彬犯，并重新渲染：
React 實例
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.body
);
以下實例初始化 state 向楼， setNewnumber 用于更新 state。所有生命周期在 Content 組件中谐区。
React 實例
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('example')
);
React AJAX
React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取湖蜕，當從服務(wù)端獲取數(shù)據(jù)庫可以將數(shù)據(jù)存儲在 state 中，再用 this.setState 方法重新渲染 UI宋列。
當使用異步加載數(shù)據(jù)時昭抒，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。
以下實例演示了獲取 Github 用戶最新 gist 共享描述:
React 實例
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" />,
document.getElementById('example')
);
React 表單與事件
在實例中我們設(shè)置了輸入框 input 值value = {this.state.data}炼杖。在輸入框值發(fā)生變化時我們可以更新 state灭返。我們可以使用 onChange 事件來監(jiān)聽 input 的變化，并修改 state坤邪。
React 實例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
上面的代碼將渲染出一個值為 Hello Runoob! 的 input 元素熙含，并通過 onChange 事件響應(yīng)更新用戶輸入的值。
實例 2
在以下實例中我們將為大家演示如何在子組件上使用表單艇纺。 onChange 方法將觸發(fā) state 的更新并將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面怎静。
你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上喂饥。
React 實例
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: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
React 事件
以下實例演示通過 onClick 事件來修改數(shù)據(jù)：
React 實例
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}>點我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
當你需要從子組件中更新父組件的 state 時消约，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上员帮。實例如下：
React 實例
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>點我</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(
<HelloMessage />,
document.getElementById('example')
);
React Refs
可以用來綁定到 render() 輸出的任何組件上或粮，允許你引用 render() 返回的相應(yīng)的支撐實例，確保在任何時間總是拿到正確的實例
使用方法
綁定一個 ref 屬性到 render 的返回值上：
<input ref="myInput" />
在其它代碼中捞高，通過 this.refs 獲取支撐實例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
完整實例
你可以通過使用 this 來獲取當前 React 組件氯材，或使用 ref 來獲取組件的引用，實例如下：
React 實例
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 獲取焦點
this.refs.myInput.focus();
},
render: function() {
// 當組件插入到 DOM 后硝岗，ref 屬性添加一個組件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="點我輸入框獲取焦點"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
