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

阅读更多
上一篇系分hw2简答题
下一篇系统分析与设计lesson7
想对作者说点什么? 我来说一句

the road to learn react

2018年05月24日 1.63MB 下载

the-road-to-learn-react-chinese.pdf

2018年03月12日 1.15MB 下载

the road to learn react chinese

2018年04月26日 1.37MB 下载

Introduction to React(Apress,2015)

2015年09月22日 1.84MB 下载

React Native for iOS Development

2017年09月04日 1.64MB 下载

react技术深入浅出介绍

2018年04月13日 95.87MB 下载

Learning.React.2017.4.epub

2017年06月16日 6.86MB 下载

React React Native 全套

2017年11月09日 73B 下载

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

关闭
关闭