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

阅读更多

没有更多推荐了,返回首页