1. React的誕生喷众，函數(shù)組件和class組件

我們首先考慮一個小需求：頁面上一個數(shù)字各谚，兩個按鈕，分別是「+」和「-」按鈕到千，點擊后數(shù)字分別+1和-1昌渤。

先以「傳統(tǒng)JS」的角度考慮，我們會怎么做憔四？

// html代碼
<div id="root">
      <span id="number">0</span>
      <button id="add">+</button>
      <button id="minus">-</button>
</div>

// 獲取顯示「數(shù)字」的節(jié)點
let number = document.querySelector('#number');

// 獲取「add」按鈕節(jié)點
let add = document.querySelector('#add');
// 獲取「minus」按鈕節(jié)點
let minus = document.querySelector('#minus');

add.addEventListener('click', function() {
   number.innerText = parseInt(number.innerText, 10) + 1;
});

minus.addEventListener('click', function() {
    number.innerText = parseInt(number.innerText, 10) - 1;
});

我們用一張圖來分下下這個「邏輯」：

image.png

如圖膀息，我們是從「頁面」中先獲取元素0望抽，然后在JS里面進行「操作」，最后在返回到頁面中履婉。

React在這里的思想就是能不能減少這種復雜的流程煤篙，從JS返回到頁面（（2）處）是不能省略的，所以就試試把（1）處的流程優(yōu)化一下毁腿。

image.png

如圖辑奈，我們直接在「JS」部分產生和操作「節(jié)點」，然后傳到「頁面」上顯示已烤。

此時要引入兩個庫鸠窗，「react」和「react-dom」,然后重寫下上面的代碼。


let number = 0;

let add = () => {
    number += 1;
    render();
}

let minus = () => {
    number -= 1;
    render();
}

render();

function render() {
    let span = React.createElement('span', {}, number);
    let button1 = React.createElement('button', {onClick: add}, '+');
    let button2 = React.createElement('button', {onClick: minus}, '-');

    let div = React.createElement('div', { className: 'parent'}, span, button1, button2);
    ReactDOM.render(div, document.querySelector('#root'));
}

如上述代碼胯究，render中有很多「React.createElement」稍计，我們用「h」來表示「React.createElement」。

function render() {
    let h = React.createElement;
    let span = h('span', {}, number);
    let button1 = h('button', {onClick: add}, '+');
    let button2 = h('button', {onClick: minus}, '-');

    let div = React.createElement('div', { className: 'parent'}, span, button1, button2);
    ReactDOM.render(div, document.querySelector('#root'));
}

然后我們又想可以不可以把「div」裕循，「span」臣嚣，「button1」，「button2」直接放到「React.render」里面剥哑？于是乎硅则。

function render() {
    let div = React.createElement('div', { className: 'parent'},
        React.createElement('span', {}, number),
        React.createElement('button', {onClick: add}, '+'),
        React.createElement('button', {onClick: minus}, '-')
    );
    ReactDOM.render(div, document.querySelector('#root'));
}

上面的「div」里面的代碼，看起來是不是很熟悉的「層級感」株婴？是不是跟HTML里面的「標簽」很像怎虫？如果能寫成「標簽」的樣子，但是最后可以轉義為正確的語法就好了困介，于是有了「 JSX」語法大审。

function render() {
    ReactDOM.render(
      <div className="parent">
        <span>{number}</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
      </div>
    , document.querySelector('#root'));
}

是不是感覺熟悉了很多？

這個時候又有一個問題座哩，如果頁面中需要很多「元素」徒扶，那不是要搞成一堆？比如下面這樣

function render() {
    ReactDOM.render(
      <div className="parent">
        <span>{number}</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        
        <span>{number}</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        
        <span>{number}</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        
        <span>{number}</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
      </div>
    , document.querySelector('#root'));
}

有什么方法可以把這些代碼「包裝」一下八回？我們想到了「函數(shù)」酷愧。（做兩個「計數(shù)器」）


let number = 0;

let add = () => {
    number += 1;
    render();
}

let minus = () => {
    number -= 1;
    render();
}

let add2 = () => {
    number += 2;
    render();
}

let minus2 = () => {
    number -= 2;
    render();
}

function Box1(obj) {
  return(
    <div>
      <span>{number}</span>
      <span>{obj.name}</span>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}

function Box2(obj) {
  return(
    <div>
      <span>{number}</span>
      <span>{obj.name}</span>
      <button onClick={add2}>+</button>
      <button onClick={minus2}>-</button>
    </div>
  );
}

function App() {
  return(
    <div className="parent">
      <Box1 name='Jason'/>
      <Box2 name='Jack'/>
    </div>
  );
}

render();

function render() {
    ReactDOM.render(
    <App/>  // 等價于 React.createElement(App)
    , document.querySelector('#root'));
}

函數(shù)是可以傳「參數(shù)」的，我們在「Box1」和「Box2」函數(shù)組件上增加一個name「屬性」缠诅，然后在
修改成如上代碼后溶浴，我們在「頁面」中點擊「+」號，出現(xiàn)一個bug管引，就是兩個「計數(shù)器」都會變化.

image.png

這是為什么呢士败？原來是因為兩個計數(shù)器共用了一個「number」變量，然后我們把兩者翻開。


let number = 0;

let add = () => {
    number += 1;
    render();
}

let minus = () => {
    number -= 1;
    render();
}

let number2 = 0;

let add2 = () => {
    number2 += 2;
    render();
}

let minus2 = () => {
    number2 -= 2;
    render();
}

function Box1(obj) {
  return(
    <div>
      <span>{number}</span>
      <span>{obj.name}</span>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}

function Box2(obj) {
  return(
    <div>
      <span>{number2}</span>
      <span>{obj.name}</span>
      <button onClick={add2}>+</button>
      <button onClick={minus2}>-</button>
    </div>
  );
}

function App() {
  return(
    <div className="parent">
      <Box1 name='Jason'/>
      <Box2 name='Jack'/>
    </div>
  );
}

render();

function render() {
    ReactDOM.render(
    <App/>  // 等價于 React.createElement(App)
    , document.querySelector('#root'));
}

設置了兩個「number」谅将，兩個「add」漾狼，兩個「minus」。但是如果有10個饥臂，那我們是不是又要分別申請十個逊躁？甚是麻煩。

然后我們又想隅熙，能不能把那些變量放到所需要的自己的「作用域」中稽煤，我們試試把「number」，「add」囚戚，「minus」放到「Box1」中酵熙。

function Box1(obj) {
  let number = 0;

  let add = () => {
    number += 1;
    render();
  }

  let minus = () => {
    number -= 1;
    render();
  }

  return(
    <div>
      <span>{number}</span>
      <span>{obj.name}</span>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}

此時點擊「+」號，發(fā)現(xiàn)「計數(shù)器」沒有變化驰坊，為啥呢匾二？其實是「add」函數(shù)中的「render()」惹的禍。當執(zhí)行「add」函數(shù)時拳芙，雖然我們「number += 1」使得「number」變化察藐，但是后一句立即執(zhí)行了「render()」，每一次render都會「初始化」Box1态鳖，就又使得「number」為0.所以造成「沒有反應」的效果转培。所以我們能不能只是render局部呢？我們想到了「class類」浆竭。

class Box1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    }
  }
  
  addOne() {
    this.setState({
      number: this.state.number + 1
    });
  }
  
  minusOne() {
    this.setState({
      number: this.state.number - 1
    });
  }
  
  render() {
    return (
      <div>
        <span>{this.state.number}</span>
        <span>{this.props.name}</span>
        <button onClick={this.addOne.bind(this)}>+</button>
        <button onClick={this.minusOne.bind(this)}>-</button>
    </div>
    );
  }
}

class Box2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    }
  }
  
  addTwo() {
    this.setState({
      number: this.state.number + 1
    });
  }
  
  minusTwo() {
    this.setState({
      number: this.state.number - 1
    });
  }
  
  render() {
    return (
      <div>
        <span>{this.state.number}</span>
        <span>{this.props.name}</span>
        <button onClick={this.addTwo.bind(this)}>+</button>
        <button onClick={this.minusTwo.bind(this)}>-</button>
    </div>
    );
  }
}

function App() {
  return(
    <div className="parent">
      <Box1 name='Jason'/>
      <Box2 name='Jack'/>
    </div>
  );
}

render();

function render() {
    ReactDOM.render(
    <App/>  // 等價于 React.createElement(App)
    , document.querySelector('#root'));
}

這里有一個細節(jié)，就是「onClick」調用函數(shù)的時候惨寿，add函數(shù)里面的「this」指向被改變了邦泄，變成了「undefined」。

onClick.call(undefined, ........); 
// onClick強行把「this」改變裂垦，所以在調用的時候顺囊，我們可以
//用「bind」綁定「this」，或者使用「箭頭函數(shù)」
onClick={ this.addOne.bind(this) };
// 或者
onClick = { () => this.addOne() }

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末蕉拢，一起剝皮案震驚了整個濱河市特碳，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌晕换，老刑警劉巖午乓，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異闸准，居然都是意外死亡益愈，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蒸其，“玉大人敏释，你說我怎么就攤上這事∶” “怎么了钥顽？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長靠汁。經常有香客問我耳鸯，道長，這世上最難降的妖魔是什么膀曾？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任县爬，我火速辦了婚禮添谊，結果婚禮上，老公的妹妹穿的比我還像新娘斩狱。我一直安慰自己，他們只是感情好所踊，可當我...
茶點故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布泌枪。她就那樣靜靜地躺著，像睡著了一般秕岛。火紅的嫁衣襯著肌膚如雪碌燕。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天继薛，我揣著相機與錄音修壕，去河邊找鬼。笑死遏考，一個胖子當著我的面吹牛慈鸠，可吹牛的內容都是我干的。我是一名探鬼主播灌具，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼青团，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了咖楣？” 一聲冷哼從身側響起督笆，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎截歉，沒想到半個月后胖腾，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
沈念sama閱讀 45,802評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年咸作，在試婚紗的時候發(fā)現(xiàn)自己被綠了锨阿。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡记罚，死狀恐怖墅诡，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情桐智，我是刑警寧澤末早，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站说庭，受9級特大地震影響然磷，放射性物質發(fā)生泄漏。R本人自食惡果不足惜刊驴，卻給世界環(huán)境...
茶點故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一姿搜、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧捆憎，春花似錦舅柜、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案致份，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至础拨，卻和暖如春氮块，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背太伊。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工雇锡，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人曙痘。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓边坤，卻偏偏與公主長得像，于是被迫代替她去往敵國和親茧痒。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,060評論 2贊 355

1. React的誕生，函數(shù)組件和class組件

1. React的誕生喷众，函數(shù)組件和class組件

推薦閱讀更多精彩內容