learn about react with me-初识react

20人阅读 评论(0) 收藏 举报

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

查看评论

React fundamental 和 React Router

-
  • 1970年01月01日 08:00

react-router 4 代码拆分

前言 在一些单页面应用中,通过打包工具将需要处理、相互依赖的模块直接打包成一个bundle,在页面第一次载入时,就会将所有的js全部载入。但是,往往有许多的场景,我们并不需要在一次性将单页应用的全部...
  • forAlienZHOU
  • forAlienZHOU
  • 2017-06-18 19:39:32
  • 1636

《React 学习之道》The Road to learn React (简体中文版)

  • 2018年03月26日 18:32
  • 898KB
  • 下载

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

  • 2018年03月12日 20:46
  • 1.15MB
  • 下载

Learn Once ,Write Anywhere —— 从零开始学习React Native(一)搭建环境

从零开始学习React Native(一)搭建环境React Native是Facebook 开源的 一款使用 JavaScript 与 React 开发原生应用的框架,最早只支持IOS,去年年底开始...
  • Yaoobs
  • Yaoobs
  • 2016-06-24 21:33:32
  • 1864

Learning React

  • 2016年11月30日 22:27
  • 3.62MB
  • 下载

Introduction to React(Apress,2015)

  • 2015年09月22日 22:54
  • 1.84MB
  • 下载

React Native for iOS Development

  • 2017年09月04日 05:22
  • 1.64MB
  • 下载

react技术深入浅出介绍

  • 2018年04月13日 15:01
  • 95.87MB
  • 下载

React Quickstart Step-By-Step Guide To Learning React Javascript Library 无水印pdf

  • 2017年10月07日 01:50
  • 1.03MB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 1561
    积分: 362
    排名: 21万+
    文章分类
    文章存档