前言

React核心的單向數據流、一切皆數據的state、不會改變的props，以及狀態提升等等經常使用便不多總結，需要的看官方文檔。

JSX

JSX 本質只是為 React.createElement(component, props, ...children)提供的語法糖！

以下兩段代碼等價（許多react的界面設計器通過這個原理，達到元數據轉化React元素，實現界面化編程?。?br />嵌套就是多個create方法的嵌套。

function hello() {return <div className="red">Hello,<span>world!</span></div>;}"use strict";function hello() {return React.createElement("div",{ className: "red" },"Hello,",React.createElement("span",null,"world!"));}

需要循環和條件渲染可以使用map、三目，或者使用if/for在jsx代碼之外！

//錯誤的！class A extends React.Component {render() {return <div>{if(){}else{}}</div>;//原來還蒙蔽的不知道為什么錯了0.0}}

React.Component （組件）

創建組件的四種方式：

React.Component 方式

class Greeting extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}}

ES5

var createReactClass = require('create-react-class');var Greeting = createReactClass({render: function() {return <h1>Hello, {this.props.name}</h1>;}});//或者使用reactvar Greeting = React.create({render: function() {return <h1>Hello, {this.props.name}</h1>;}});

函數式

const Button = ({day,increment}) => {return (<div><button onClick={increment}>Today is {day}</button></div>)}

PureComponet

大多數情況下， 我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動為我們添加的shouldComponentUpate函數，只是對props和state進行淺比較(shadow comparison)，當props或者state本身是嵌套對象或數組等時，淺比較并不能得到預期的結果，這會導致實際的props和state發生了變化，但組件卻沒有更新的問題。當然還是有解決的方法的，所以建議還是少用。

事件處理

事件綁定的四種方法：推薦使用第一第二種。

class Toggle extends React.Component {constructor(props) {{...}//方法一必須在這里綁定this.handleClick1 = this.handleClick.bind(this);}handleClick1() {this...}//方法二使用【屬性初始化器語法】【需要開啟babel stage-0以上】handleClick2=()=> {this...}render() {return (<div><button onClick={this.handleClick1}></button><button onClick={this.handleClick2}></button>//方法三在使用時綁定<button onClick={this.handleClick1.bind(this)}></button>//方法四在回調函數中使用 箭頭函數/**渲染的時候都會創建一個不同的回調函數。在大多數情況下，這沒有問題。然而如果這個回調函數作為一個屬性值傳入低階組件，這些組件可能會進行額外的重新渲染。我們通常建議在構造函數中綁定或使用屬性初始化器語法來避免這類性能問題。**/<button onClick={(e) => this.handleClick1(e)}></button></div>);}}