1. React的诞生，函数组件和class组件

我们首先考虑一个小需求：页面上一个数字，两个按钮，分别是「+」和「-」按钮，点击后数字分别+1和-1。

先以「传统JS」的角度考虑，我们会怎么做？

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

// 获取显示「数字」的节点
let number = document.querySelector('#number');

// 获取「add」按钮节点
let add = document.querySelector('#add');
// 获取「minus」按钮节点
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）处的流程优化一下。

image.png

如图，我们直接在「JS」部分产生和操作「节点」，然后传到「页面」上显示。

此时要引入两个库，「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'));
}

有什么方法可以把这些代码「包装」一下？我们想到了「函数」。（做两个「计数器」）


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'));
}

函数是可以传「参数」的，我们在「Box1」和「Box2」函数组件上增加一个name「属性」，然后在
修改成如上代码后，我们在「页面」中点击「+」号，出现一个bug，就是两个「计数器」都会变化.

image.png

这是为什么呢？原来是因为两个计数器共用了一个「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>
  );
}

此时点击「+」号，发现「计数器」没有变化，为啥呢？其实是「add」函数中的「render()」惹的祸。当执行「add」函数时，虽然我们「number += 1」使得「number」变化，但是后一句立即执行了「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'));
}

这里有一个细节，就是「onClick」调用函数的时候，add函数里面的「this」指向被改变了，变成了「undefined」。

onClick.call(undefined, ........); 
// onClick强行把「this」改变，所以在调用的时候，我们可以
//用「bind」绑定「this」，或者使用「箭头函数」
onClick={ this.addOne.bind(this) };
// 或者
onClick = { () => this.addOne() }

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,711评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,079评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,194评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,089评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,197评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,306评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,338评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,119评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,541评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,846评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,014评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,694评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,322评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,026评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,257评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,863评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,895评论 2赞 351

1. React的诞生，函数组件和class组件

推荐阅读更多精彩内容