React初探
React 特色
聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。javascript
高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。html
靈活 −React能夠與已知的庫或框架很好地配合。java
JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。node
組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。react
單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。jquery
官網地址
<!-- more -->git
簡單Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
引入依賴
實例中咱們引入了三個庫： react.min.js 、react-dom.min.js 和 browser.min.js：
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
browser.min.js - 用於將 JSX 語法轉爲 JavaScript 語法es6
React代碼
<script type="text/babel"></script>
React JSX語法
React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。咱們不須要必定使用 JSX，但它有如下優勢：github
JSX 執行更快，由於它在編譯爲 JavaScript 代碼後進行了優化。數據庫
它是類型安全的，在編譯過程當中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。
簡單嵌套元素
JSX 看起來相似 HTML ，咱們能夠看下實例:
ReactDOM.render方法接受兩個參數：
一個虛擬 DOM 節點和一個真實 DOM 節點，做用是將虛擬 DOM 掛載到真實 DOM。
實例：Hello, world!
ReactDOM.render(content,element);
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
複雜嵌套元素
咱們能夠在以上代碼中嵌套多個 HTML 標籤，須要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性須要使用 data- 前綴。
實例：文字
ReactDOM.render(
<div>
<h1>菜鳥教程</h1>
<h2>歡迎學習 React</h2>
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
</div>,
mountNode
);
JavaScript 表達式
咱們能夠在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例以下：
實例：計算
ReactDOM.render(
<div><h1>{1+1}</h1></div>,mountNode
);
判斷語句
在 JSX 中不能使用 if else 語句，但可使用 conditional (三元運算) 表達式來替代。如下實例中若是變量 i 等於 1 瀏覽器將輸出 true, 若是修改 i 的值，則會輸出 false.
實例：判斷
const i = 1;
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>,
mountNode
);
樣式
React 推薦使用內聯樣式。咱們可使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px 。如下實例演示了爲 h1 元素添加 myStyle 內聯樣式：
實例：CSS樣式
const myStyle = {
fontSize: 100,
lineHeight: '30px',
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鳥教程</h1>,mountNode
);
ReactDOM.render(<h1 style = {{fontSize: 100,lineHeight: '30px',color: '#FF0000'}}>菜鳥教程</h1>,mountNode);
ReactDOM.render(<h1 className = 'class_name'>菜鳥教程</h1>,mountNode);
註釋
註釋須要寫在花括號中，實例以下：
實例：註釋
ReactDOM.render(
<div>
<h1>菜鳥教程</h1>
{/*註釋...*/}
</div>,mountNode
);
React.Component組件
基礎語法
HTML 標籤 vs. React 組件
React 能夠渲染 HTML 標籤 (strings) 或 React 組件 (classes)。要渲染 HTML 標籤，只需在 JSX 裏使用小寫字母的標籤名。
要渲染 React 組件，只需建立一個大寫字母開頭的本地變量。
實例：建立組件
class DivElement extends React.Component{
render() {
return (
<div className="foo">arr</div>
);
}
}
ReactDOM.render(<DivElement />, mountNode);
實例：組件嵌套
class MyComponent extends React.Component{
render() {
return <div className="MyComponent">arr</div>;
}
}
class DivElement extends React.Component{
render() {
return <MyComponent />;
}
}
ReactDOM.render(<DivElement />, mountNode);
React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標籤。
注意:
因爲 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議做爲 XML 屬性名。做爲替代，React DOM 使用 className 和 htmlFor 來作對應的屬性。
實例：組件語法
class HelloMessage extends React.Component{
render() {
return <div className="HelloMessage">arr</div>;
}
}
class HelloMessage extends React.Component{
render() {
return (
<div className="HelloMessage">arr</div>
);
}
}
React.Component方法用於生成一個組件類 HelloMessage。<HelloMessage /> 實例組件類並輸出信息。
注意：原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，好比 HelloMessage 不能寫成 helloMessage。除此以外還須要注意組件類只能包含一個頂層標籤，不然也會報錯。
若是咱們須要向組件傳遞參數，可使用 this.props 對象,實例以下：
實例：獲取父元素的值
class DivElement extends React.Component{
render() {
return (
<div className="foo">{this.props.name}</div>
);
}
}
ReactDOM.render(<DivElement name="Runoob" />, mountNode);
以上實例中 name 屬性經過 this.props.name 來獲取（自身的數字）。
注意，在添加屬性時， class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。
複合組件
經過建立多個組件來合成一個組件，即把組件的不一樣功能點進行分離。
如下實例咱們實現了輸出網站名字和網址的組件：
實例：連接
class WebSite extends React.Component{
render() {
return (
<div className={this.props.name}><Name name={this.props.name} /><Link site={this.props.site} /></div>
);
}
}
class Name extends React.Component{
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component{
render() {
return (
<a href={this.props.site}>{this.props.site}</a>
);
}
}
ReactDOM.render(<WebSite name="菜鳥教程" site=" http://www.runoob.com" />, mountNode);
React State(狀態)
把組件當作是一個狀態機（State Machines）。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。
constructor()初始狀態
實例：點擊喜歡&不喜歡
class LikeButton extends React.Component{
constructor() {
super();
this.state ={liked: false};
}
handleClick() {
this.setState({
liked: !this.state.liked
});
}
render() {
let text = this.state.liked ? '喜歡' : '不喜歡';
return (
<p onClick={this.handleClick.bind(this)}>你<b>{text}</b>我。點我切換狀態。</p>
);
}
};
ReactDOM.render(<LikeButton />, mountNode);
handleClick = ()=>{
this.setState({
liked: !this.state.liked
});
}
constructor是組件的構造函數，會在建立實例時自動調用。
...args表示組件參數，super(...args)是 ES6 規定的寫法。
this.state對象用來存放內部狀態，這裏是定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。
onClick={this.handleClick.bind(this)}綁定事件，返回參數。
e.target.value綁定事件後的返回值。
實例：輸入文字實時顯示
class MyTitle extends React.Component{
constructor() {
super();
this.state ={name: 'can you speek English!'};
}
handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}
render() {
return (
<div>
<input type="text" onChange={this.handleChange.bind(this)} />
<p>luuman,{this.state.name}</p>
</div>
);
}
}
ReactDOM.render(<MyTitle />, mountNode);
React Props
props經過組件獲取數據
基礎語法
實例：數據傳遞
class HelloMessage extends React.Component{
render(){
return <h1>Hello {this.props.name}</h1>;
}
}
ReactDOM.render(
<HelloMessage name="Runoob" />,mountNode
);
實例中 name 屬性經過 this.props.name 來獲取。
defaultProps默認值
默認Props：你能夠經過defaultProps()方法爲props設置默認值，實例以下：
class HelloMessage extends React.Component{
render(){
return <h1>Hello {this.props.name}</h1>;
}
}
HelloMessage.defaultProps = {
name: 'Runoob'
}
ReactDOM.render(<HelloMessage />,mountNode);
class WebSite extends React.Component{
render() {
return (
<div className={this.props.name}><Name name={this.props.name} /><Link site={this.props.site} /></div>
);
}
}
WebSite.defaultProps ={
name: "菜鳥教程",
site: "http://www.runoob.com"
}
class Name extends React.Component{
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component{
render() {
return (
<a href={this.props.site}>{this.props.site}</a>
);
}
}
ReactDOM.render(<WebSite />, mountNode);
this.props.children
實例：點擊次數
class NotesList extends React.Component{
render(){
return(
<ol>{
React.Children.map(this.props.children,function(child){
console.log(child);
return <li>{child}</li>
})
}</ol>
);
}
}
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
<span>world</span>
<span>world</span>
</NotesList>,
mountNode
);
PropTypes驗證
Props 使用propTypes，它能夠保證咱們的應用組件被正確使用，React.PropTypes 提供不少驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制檯會拋出警告。
實例：判斷組件屬性title是否爲字符串：
const name = 123;
console.log(name);
class HelloMessage extends React.Component{
render(){
return <h1>Hello {this.props.title}</h1>;
}
}
HelloMessage.propTypes = {
title: React.PropTypes.string
}
ReactDOM.render(<HelloMessage title={name} />,mountNode);
若是 title 使用數字變量，控制檯會出現如下錯誤信息：
Warning: Failed prop type: Invalid prop `title` of type `number` supplied to `HelloMessage`, expected `string`.
PropTypes屬性值
.propTypes = {
// 能夠聲明 prop 爲指定的 JS 基本數據類型，默認狀況，這些數據是可選的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// 能夠被渲染的對象 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)
]),
// 指定類型組成的數組
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定類型的屬性構成的對象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 參數的對象
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(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
customArrayProp: React.PropTypes.arrayOf(
function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}
)
}
state和props區別
在於props是不可變的，而子組件只能經過props來獲取數據。
而state能夠根據與用戶交互來改變。這就是爲何有些容器組件須要定義state來更新和修改數據。
如下實例演示瞭如何在應用中組合使用state和props。咱們能夠在父組件中設置state，並經過在子組件上使用props將其傳遞到子組件上。在render函數中,咱們設置name和site來獲取父組件傳遞過來的數據。
實例：連接
class WebSite extends React.Component{
constructor(props) {
super(props);
this.state = {
name: "菜鳥教程",
site: "http://www.runoob.com"
};
}
render(){
return <div><Name name={this.state.name} /><Link site={this.state.site} /></div>
}
}
class Name extends React.Component{
render(){
return <h1>{this.props.name}</h1>
}
}
class Link extends React.Component{
render(){
return <a href={this.props.site}>{this.props.site}</a>
}
}
ReactDOM.render(<WebSite />,mountNode);
React 組件 API
在本章節中咱們將討論 React 組件 API。
基礎語法
mixins去重
const ExampleMixin = {
componentDidMount(){
// bind some event listeners here
}
componentWillUnmount(){
// unbind those events here!
}
}
class ExampleComponent extends React.Component{
mixins: [ExampleMixin];
render(){}
}
class AnotherComponent extends React.Component{
mixins: [ExampleMixin];
render(){}
}
<!-- 設置狀態:setState
setState(object nextState[, function callback])
參數說明
nextState，將要設置的新狀態，該狀態會和當前的state合併
callback，可選參數，回調函數。該函數會在setState設置成功，且組件從新渲染後調用。
合併nextState和當前state，並從新渲染組件。setState是React事件處理函數中和請求回調函數中觸發UI更新的主要方法。
關於setState
不能在組件內部經過this.state修改狀態，由於該狀態會在調用setState()後被替換。
setState()並不會當即改變this.state，而是建立一個即將處理的state。setState()並不必定是同步的，爲了提高性能React會批量執行state和DOM渲染。
setState()老是會觸發一次組件重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯。 -->
實例：點擊次數
class Counter extends React.Component{
constructor(){
super();
this.state = {
clickCount: 0
};
}
handleClick(){
this.setState({
clickCount: this.state.clickCount +1
});
}
render(){
return <h2 onClick={this.handleClick.bind(this)}>點我！點擊次數爲: {this.state.clickCount}</h2>;
}
}
ReactDOM.render(<Counter />,mountNode);
<!--
實例中經過點擊 h2 標籤來使得點擊計數器加 1。
替換狀態：replaceState
replaceState(object nextState[, function callback])
nextState，將要設置的新狀態，該狀態會替換當前的state。
callback，可選參數，回調函數。該函數會在replaceState設置成功，且組件從新渲染後調用。
replaceState()方法與setState()相似，可是方法只會保留nextState中狀態，原state不在nextState中的狀態都會被刪除。
設置屬性：setProps
setProps(object nextProps[, function callback])
nextProps，將要設置的新屬性，該狀態會和當前的props合併
callback，可選參數，回調函數。該函數會在setProps設置成功，且組件從新渲染後調用。
設置組件屬性，並從新渲染組件。
props至關於組件的數據流，它老是會從父組件向下傳遞至全部的子組件中。當和一個外部的JavaScript應用集成時，咱們可能會須要向組件傳遞數據或通知ReactDOM.render()組件須要從新渲染，可使用setProps()。
更新組件，我能夠在節點上再次調用ReactDOM.render()，也能夠經過setProps()方法改變組件屬性，觸發組件從新渲染。
替換屬性：replaceProps
replaceProps(object nextProps[, function callback])
nextProps，將要設置的新屬性，該屬性會替換當前的props。
callback，可選參數，回調函數。該函數會在replaceProps設置成功，且組件從新渲染後調用。
replaceProps()方法與setProps相似，但它會刪除原有
props
強制更新：forceUpdate
forceUpdate([function callback])
參數說明
callback，可選參數，回調函數。該函數會在組件render()方法調用後調用。
forceUpdate()方法會使組件調用自身的render()方法從新渲染組件，組件的子組件也會調用本身的render()。可是，組件從新渲染時，依然會讀取this.props和this.state，若是狀態沒有改變，那麼React只會更新DOM。
forceUpdate()方法適用於this.props和this.state以外的組件重繪（如：修改了this.state後），經過該方法通知React須要調用render()
通常來講，應該儘可能避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態並由React觸發render()調用。
獲取DOM節點：findDOMNode
DOMElement findDOMNode()
返回值：DOM元素DOMElement
若是組件已經掛載到DOM中，該方法返回對應的本地瀏覽器 DOM 元素。當render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法頗有用，如：獲取表單字段的值和作一些 DOM 操做。
判斷組件掛載狀態：isMounted
bool isMounted()
返回值：true或false，表示組件是否已掛載到DOM中
isMounted()方法用於判斷組件是否已掛載到DOM中。可使用該方法保證了setState()和forceUpdate()在異步場景下的調用不會出錯。
本文參考：http://itbilu.com/javascript/... -->
React 組件生命週期
組件的生命週期可分紅三個狀態：Mounting、Updating、Unmounting
Mounting：已插入真實 DOM
constructor()
componentWillMount()
在渲染前調用,在客戶端也在服務端。
render()
在渲染時調用
componentDidMount()
在第一次渲染後調用，只在客戶端。以後組件已經生成了對應的DOM結構，能夠經過this.getDOMNode()來進行訪問。
若是你想和其餘JavaScript框架一塊兒使用，能夠在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操做(防止異部操做阻塞UI)。
Updating：正在被從新渲染
componentWillReceiveProps()
在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate()
返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
能夠在你確認不須要更新組件時使用。
componentWillUpdate()
在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用。
render()
componentDidUpdate()
在組件完成更新後當即調用。在初始化時不會被調用。
Unmounting：已移出真實 DOM
componentWillUnmount()
在組件從 DOM 中移除的時候馬上被調用。
實例：定時器，每隔100毫秒從新設置組件的透明度，並從新渲染
class Hello extends React.Component{
constructor() {
super();
this.state = {
opacity: 1.0
}
}
componentDidMount(){
this.timer = setInterval(function(){
let opacity = this.state.opacity;
opacity -= .05;
if(opacity < .1){
opacity = 1.0;
}
this.setState({
opacity: opacity
})
}.bind(this),100)
}
render(){
return(
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
)
}
}
ReactDOM.render(<Hello name="world" />,mountNode);
實例：點擊效果
如下實例初始化 state ， setNewnumber 用於更新 state。全部生命週期在 Content 組件中。
class Button extends React.Component{
constructor() {
super();
this.state = {
data:0
}
}
setNewNumber(){
this.setState({
data: this.state.data + 1
})
}
render(){
return(
<div>
<button onClick={this.setNewNumber.bind(this)}>INCREMENT</button>
<Content myNumber={this.state.data}></Content>
</div>
)
}
}
class Content extends React.Component{
componentWillMount(){
console.log('Component WILL MOUNT!')
}
componentDidMount(){
console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
console.log('Component WILL RECEIVE PROPS!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount(){
console.log('Component WILL UNMOUNT!')
}
render(){
return(
<div>
<h3>{this.props.myNumber}</h3>
</div>
)
}
}
ReactDOM.render(<Button />,mountNode);
實例：統計時間
class Timer extends React.Component{
constructor(props) {
super(props);
this.state = {secondsElapsed: 0};
}
tick(){
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount(){
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount(){
clearInterval(this.interval);
}
render(){
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
}
ReactDOM.render(<Timer />, mountNode);
Lists and Keys列表遍歷
JSX 容許在模板中插入數組，數組會自動展開全部成員：
const arr = [
<h1>菜鳥教程</h1>,
<h2>學的不只是技術，更是夢想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,mountNode
);
Array.map
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled);
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,key) =>
<li key={key}>{number}</li>
);
console.log(listItems);
ReactDOM.render(<ul>{listItems}</ul>,mountNode);
const listItems = numbers.map(function(number,keys){
return(
<li key={keys}>
{number}
</li>
)
});
Array.forEach 遍歷
Array.forEach((e) => {
alert(e);
})
Array.forEach(function(e){
alert(e);
})
let repos = this.state.data.items;
let repoList = [];
repos.forEach((p,keys) => {
let item = <li key={keys}><a href={p.html_url}>{p.name}</a>({p.stargazers_count} stars)<br />{p.description}</li>;
repoList.push(item);
})
let repos = this.state.data.items;
let repoList = repos.map(function(repo,index){
return(
<li key={index}>
<a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} stars)<br />
{repo.description}
</li>
);
});
Array.splice 刪除
Array.filter
方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素
Array.every
Array.push
Handling Events綁定事件
Forms表單
基礎語法
實例：輸入文字實時顯示
class HelloMessage extends React.Component{
constructor(){
super();
this.state = {
value: 'Hello World!'
};
}
handleChange(even){
this.setState({
value: even.target.value
})
}
render(){
let value = this.state.value;
return(
<div>
<input type='text' value={value} onChange={this.handleChange.bind(this)} />
<h4>{value}</h4>
</div>
);
}
}
ReactDOM.render(<HelloMessage />,mountNode);
實例：輸入文字實時顯示
你須要在父組件經過建立事件句柄 (handleChange) ，並做爲 prop (updateStateProp) 傳遞到你的子組件上。
class Content extends React.Component{
render(){
return(
<div>
<input type='text' value={this.props.myDataProp} onChange={this.props.updataStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
)
}
}
class HelloMessage extends React.Component{
constructor(){
super();
this.state = {
value: 'Hello World!'
};
}
handleChange(even){
this.setState({
value: even.target.value
})
}
render(){
let value = this.state.value;
return(
<div>
<Content myDataProp={value} updataStateProp={this.handleChange.bind(this)} />
</div>
);
}
}
ReactDOM.render(<HelloMessage />,mountNode);
實例：點我
class HelloMessage extends React.Component{
constructor(){
super();
this.state={
value: 'Hello World!'
}
}
handleChange(event){
this.setState({
value: 'luuman is good man!'
})
}
render(){
let value = this.state.value;
return(
<div>
<button onClick={this.handleChange.bind(this)}>點我</button>
<h4>{value}</h4>
</div>
)
}
}
ReactDOM.render(<HelloMessage />,mountNode);
當你須要從子組件中更新父組件的 state 時，你須要在父組件經過建立事件句柄 (handleChange) ，並做爲 prop (updateStateProp) 傳遞到你的子組件上。實例以下：
實例：點我
class Content extends React.Component{
render(){
return(
<div>
<button onClick={this.props.updateStateProp}>點我</button>
<h4>{this.props.myDataProp}</h4>
</div>
)
}
}
class HelloMessage extends React.Component{
constructor(){
super();
this.state = {
value: 'Hello World!'
}
}
handleChange(event){
this.setState({
value: 'luuman is good man!'
})
}
render(){
let value = this.state.value;
return <div><Content myDataProp={value} updateStateProp={this.handleChange.bind(this)}></Content></div>
}
}
ReactDOM.render(<HelloMessage />,mountNode);
Refs and the DOM
React Refs
React 支持一種很是特殊的屬性 Ref ，你能夠用來綁定到 render() 輸出的任何組件上。
這個特殊的屬性容許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就能夠確保在任什麼時候間老是拿到正確的實例。
使用方法：
綁定一個 ref 屬性到 render 的返回值上：
在其它代碼中，經過 this.refs 獲取支撐實例:
<input ref="myInput" /> var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();
實例：點我輸入框獲取焦點
class MyComponent extends React.Component{
handleClick(){
this.refs.myInput.focus();
}
render(){
return(
<div>
<input type='text' ref='myInput' />
<input type='button' value='點我輸入框獲取焦點' onClick={this.handleClick.bind(this)} />
</div>
);
}
}
ReactDOM.render(<MyComponent />,mountNode);
當組件插入到 DOM 後，ref屬性添加一個組件的引用於到this.refs.name獲取。
實例中，咱們獲取了輸入框的支撐實例的引用，子點擊按鈕後輸入框獲取焦點。
咱們也可使用 getDOMNode()方法獲取DOM元素
React AJAX
React 組件的數據能夠經過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫能夠將數據存儲在 state 中，再用 this.setState 方法從新渲染 UI。
當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。
實例
$.get(URL,function(data){})
實例：獲取 Github 用戶最新 gist 共享描述:
class UserGist extends React.Component{
constructor() {
super();
this.state = {
username: '',
lastGistUrl: ''
}
}
componentDidMount(){
this.serverRequest = $.get(this.props.source,function(result){
let lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
})
}.bind(this))
}
componentWillUnmount(){
this.serverRequest.abort();
}
render(){
return(
<div>
{this.state.username}
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
)
}
}
ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,mountNode);
實例：拉取數據
import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
const mountNode = document.getElementById('root');
class RipoList extends React.Component{
constructor(){
super();
this.state = {
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(){
if(this.state.loading){
return <span>Loading...</span>;
}else if(this.state.error != null){
return <span>Error: {this.state.error.message}</span>;
}else{
let repos = this.state.data.items;
let repoList = repos.map(function(repo,index){
return(
<li key={index}>
<a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} stars)<br />
{repo.description}
</li>
);
});
return(
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
)
}
}
}
ReactDOM.render(<RipoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,mountNode);
Add-Ons 添加插件
jquery
import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component{
render(){
return(
<div>HelloWorld</div>
);
}
}
ReactDOM.render(<HelloWorld />,$('#example')[0]);
recharts
bootstrap
MarkdownEditor
ReactDOM
render()
ReactDOM.render(
element,
container,
[callback]
)
unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
findDOMNode()
ReactDOM.findDOMNode(component)
onkeypress
/* 在實例中，咱們使用了支持多瀏覽器的方法，由於 keyCode 屬性沒法再 Firefox 瀏覽器中工做。可是 which 屬性能夠。
若是瀏覽器支持 event.which 則使用 event.which，不然使用 event.keyCode */
ES6
let
用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。
for循環的計數器
for (let i = 0; i < 10; i++) {}
console.log(i);
//ReferenceError: i is not defined
下面的代碼若是使用var，最後輸出的是10
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
若是使用let，聲明的變量僅在塊級做用域內有效，最後輸出的是6
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
- 1. React 初探
- 2. react-native 初探
- 3. react初探
- 4. 初探React-Native
- 5. React初探
- 6. 初探react(一)
- 7. React Fiber初探
- 8. React Native 初探
- 9. react Hook初探
- 10. React初探之React特性
- 更多相關文章...
- • 探索Redis事務回滾 - Redis教程
- • 使用TCP協議檢測防火牆 - TCP/IP教程
- • 適用於PHP初學者的學習線路和建議
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. React 初探
- 2. react-native 初探
- 3. react初探
- 4. 初探React-Native
- 5. React初探
- 6. 初探react(一)
- 7. React Fiber初探
- 8. React Native 初探
- 9. react Hook初探
- 10. React初探之React特性