摘要：方法一必須在這里綁定方法二使用屬性初始化器語法需要開啟以上方法三在使用時(shí)綁定方法四在回調(diào)函數(shù)中使用箭頭函數(shù)渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件，這些組件可能會(huì)進(jìn)行額外的重新渲染。

從16年夏天初學(xué)React，到17年正式投入到工作中使用，直到現(xiàn)在V16.2發(fā)版，React發(fā)生了巨大的變化，最近在工作中使用時(shí)遇到很多基礎(chǔ)不是非常清晰，借此再讀React官方文檔【中文】。

React核心的單向數(shù)據(jù)流、一切皆數(shù)據(jù)的state、不會(huì)改變的props，以及狀態(tài)提升等等經(jīng)常使用便不多總結(jié)，需要的看官方文檔。

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

1.React DOM 在渲染之前都被轉(zhuǎn)換成了字符串，它天生自帶防止 XSS 攻擊的屬性。

2.Babel 轉(zhuǎn)譯器會(huì)把 JSX 轉(zhuǎn)換成一個(gè)名為 React.createElement()的方法調(diào)用。在線babel編譯

以下兩段代碼等價(jià)（許多react的界面設(shè)計(jì)器通過這個(gè)原理，達(dá)到元數(shù)據(jù)轉(zhuǎn)化React元素，實(shí)現(xiàn)界面化編程！）
嵌套就是多個(gè)create方法的嵌套。

function hello() {
  return 
Hello,world!
;
}

"use strict";

function hello() {
  return React.createElement(
    "div",
    { className: "red" },
    "Hello,",
    React.createElement(
      "span",
      null,
      "world!"
    )
  );
}

3.JSX中的屬性是可以任何 {} 包裹的 JavaScript 表達(dá)式作為一個(gè)屬性值，不能使用if和for。

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

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

創(chuàng)建組件的四種方式：詳情對(duì)比參見或者react官網(wǎng)

React.Component 方式

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

ES5

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

函數(shù)式

const Button = ({
  day,
  increment
}) => {
  return (
    

      Today is {day}
    
  )
}

PureComponet

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

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

class Toggle extends React.Component {
  constructor(props) {
  {...}
  //方法一必須在這里綁定
    this.handleClick1 = this.handleClick.bind(this);
  }
  handleClick1() {
    this...
  }
  //方法二使用【屬性初始化器語法】【需要開啟babel stage-0以上】
  handleClick2=()=> {
    this...
  }
  render() {
    return (
    

      
      
      //方法三在使用時(shí)綁定
      
      //方法四在回調(diào)函數(shù)中使用 箭頭函數(shù)
      /**
      渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。在大多數(shù)情況下，這沒有問題。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件，這些組件可能會(huì)進(jìn)行額外的重新渲染。我們通常建議在構(gòu)造函數(shù)中綁定或使用屬性初始化器語法來避免這類性能問題。
      **/
       this.handleClick1(e)}>
      
    
    );
  }
}

在React中不推薦使用繼承,不推薦繼承自定義Component。

//不推薦使用
class Parent extends React.Component {
  render() {
    return 
...
;
  }
}
class A extends Parent {
  render() {
    return 
...
;
  }
}

//推薦使用
class A extends React.Component {
  render() {
    return ...;
  }
}

Component || create

defaultProps || getDefaultProps

constructor state || getInitialState

this bind || 不需要

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 
Hello, {this.props.name}
;
  }
}
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() {
  //組件中的方法會(huì)自動(dòng)綁定至實(shí)例，不需要像上面那樣加 .bind(this)
    return 
Hello, {this.props.name}
;
  }
});

如果可以通過聲明式實(shí)現(xiàn)，則盡量避免使用 refs。

不能在函數(shù)式組件上使用 ref 屬性，因?yàn)樗鼈儧]有實(shí)例

舊版 API：String 類型的 Refs，存在問題，可能會(huì)在未來移除，不推薦使用。

對(duì)父組件暴露refs，在父元素拿子元素

function CustomTextInput(props) {
  return (
    

      
    
  );
}

class Parent extends React.Component {
//this.inputElement 就是CustomTextInput中的input
  render() {
    return (
       this.inputElement = el}
      />
    );
  }
}

獲取一個(gè)DOM除了refs還有更加簡(jiǎn)單粗暴的方法findDOMNode。
findDOMNode 是用于操作底層DOM節(jié)點(diǎn)的備用方案。使用它的優(yōu)先級(jí)比refs更低?。?br>findDOMNode 只對(duì)掛載過的組件有效。
findDOMNode 不能用于函數(shù)式的組件中。

import ReactDOM from "react-dom";
ReactDOM.render(
  element,
  container,
  [callback]//不為人知的第三個(gè)參數(shù)??！
)
ReactDOM.unmountComponentAtNode(container)
ReactDOM.findDOMNode(component)

空的 JSX 標(biāo)簽Fragments <>或者

與運(yùn)算符 && true && expression 總是返回 expression，而 false && expression 總是返回 false。

阻止組件渲染常用null組件的 render 方法返回 null 并不會(huì)影響該組件生命周期方法的回調(diào)。例如，componentWillUpdate 和 componentDidUpdate 依然可以被調(diào)用。

### 高階組件HOC 使用高階組件（HOC）解決交叉問題