learn about react with me-初识react

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

React Use JSX to replace custom JavaScript.

JSX looks like an XML version of JavaScript. 

React的组件

React.Component

下面这段代码中，我们声明了一个名为"ShoppingList"的react组件类，pops存储了该组件的一些参数。render方法返回要显示的视图的层次（一个轻量级的描述），React负责渲染。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

标签会被翻译为React方法createElement。所以上面的代码等价于

class ShoppingList extends React.Component {
  render() {
    return React.createElement('div', {className: 'shopping-list'},        React.createElement('h1', /* ... h1 children ... */),        React.createElement('ul', /* ... ul children ... */)    );
  }
}

【注】：在JSX中，可以试用任何的javascript表达式。每个React元素都是真正的javascript对象。

在定义了ShoppingList类之后，我们可以像声明一个html标签一样，如div，轻松地声明ShoppingList类。注意区别。

Usage：<ShoppingList name="fish"/>

comparison:<div id="fish"></div>

例子

我作为一名前端小白，以前不明白为何要使用框架？手写每一行html与JS代码不是挺好的吗？为何框架又更新得如此快呢？通过

一个简单具体的例子感受下框架的便捷高效。

这是一个很unremarkable的例子。创建一个九宫格。

在纯html代码中怎么做呢？很简单，就是写九行代码：<button></button>。然后在css中指定布局。

那么如果要创建一个99宫格呢？写99行一样冗余的代码？可以用纯javascript在99次循环中，完成这个任务。也只要写一行代码。

那么在React中怎么做呢？我们声明一个返回button的Square类，九宫格Board类的render方法返回九个Square的层次视图。

哎？好像React框架也没有比较方便啊？我也是这么想的。于是，我继续往下学习。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

React的第一个强大之处：传参-props

props即properties的简写。传入的参数都成被封装入props对象中，称为它的一个属性。

修改Board的renderSquare方法，以把一个参数value传给Square类。

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

注意：我们把参数传给了一个声明的Square。于是，我们修改Square类，使它能够处理这个参数。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

如你所见，参数value是props对象的一个属性。

在Board的render方法中，调用了renderSquare方法，把数字1-9作为参数。下面是修改后的结果：

交互性

下面这段代码中，我们为button绑定了一个onClick方法，与JS的onclick方法对应。当鼠标点击button，会跳出警告框，提示”click“

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

this.state

顾名思义，state属性存储react对象的某些状态，例如，可以存储传给Square的数字。

【注】：state在构造函数constructor中可直接设置

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

state在其他方法中设置需调用setState方法

state属性可以作为props的补充，参数可以通过state直接传给声明的React类。方法如下：

Now change the Square render method to display the value from the current state, and to toggle it on click:

• Replace the () => alert() event handler with () => this.setState({value: 'X'}).

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    num=this.state.value;
    if (!num)
      num=this.props.value;
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {num}
      </button>
    );
  }
}

现在，点击button，会调用setState方法，导致state的更新，导致重新渲染，进而会改变button的数字值为‘X’。

好了。我们一次完成了对React的一次overview。但依然还有问题没解决，我们下次再见。

 code reference：https://reactjs.org/tutorial/tutorial.html#what-is-react