前言
React核心的單向數據流、一切皆數據的state、不會改變的props，以及狀態提升等等經常使用便不多總結，需要的看官方文檔。
JSX
JSX 本質只是為 React.createElement(component, props, ...children)提供的語法糖！
以下兩段代碼等價（許多react的界面設計器通過這個原理，達到元數據轉化React元素，實現界面化編程！）
嵌套就是多個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>);}}組合 vs 繼承
在React中不推薦使用繼承,不推薦繼承自定義Component。
//不推薦使用class Parent extends React.Component {render() {return <div>...</div>;}}class A extends Parent {render() {return <div>...</div>;}}//推薦使用class A extends React.Component {render() {return <Parent>...</Parent>;}}不使用 ES6
class Greeting extends React.Component {constructor(props) {super(props);this.state = {count: props.initialCount};this.handleClick = this.handleClick.bind(this);}handleClick() {alert(this.state.message);}render() {return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;}}Greeting.defaultProps = {name: 'Mary'};var createReactClass = require('create-react-class');var Greeting = createReactClass({getInitialState: function() {return {count: this.props.initialCount};},getDefaultProps: function() {return {name: 'Mary'};},handleClick: function() {alert(this.state.message);},render: function() {//組件中的方法會自動綁定至實例，不需要像上面那樣加 .bind(this)return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;}});Refs
1.如果可以通過聲明式實現，則盡量避免使用 refs。
2.不能在函數式組件上使用 ref 屬性，因為它們沒有實例
3.舊版 API：String 類型的 Refs，存在問題，可能會在未來移除，不推薦使用。
4.對父組件暴露refs，在父元素拿子元素
function CustomTextInput(props) {return (<div><input ref={props.inputRef} /></div>);}class Parent extends React.Component {//this.inputElement 就是CustomTextInput中的inputrender() {return (<CustomTextInputinputRef={el => this.inputElement = el}/>);}}ReactDOM
獲取一個DOM除了refs還有更加簡單粗暴的方法findDOMNode。
findDOMNode 是用于操作底層DOM節點的備用方案。使用它的優先級比refs更低！！
findDOMNode 只對掛載過的組件有效。
findDOMNode 不能用于函數式的組件中。
import ReactDOM from 'react-dom';ReactDOM.render(element,container,[callback]//不為人知的第三個參數！！)ReactDOM.unmountComponentAtNode(container)ReactDOM.findDOMNode(component)
不常用的新發現
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
