肉渣教程

React 简介

上一节 下一节

React是Facebook开源出的JavaScript库,主要构建快速响应的大型Web应用。


React 简介

通过React库可以自定义一个个前端组件,然后通过这些组件的实例化来组成复杂的UI界面。举一个例子如下,大致先找找感觉就好啦,后续会进一步介绍。

class SloganList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>关于{this.props.name}的口号</h1>
        <ul>
          <li>地振高冈,一派西山千古秀</li>
          <li>门朝大海,三合河水万年流</li>
          <li>反清复明</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement( SloganList, {'name':'天地会'} ),
  document.getElementById('root')
);

运行一下


不是太严谨的非术语来说:就是在React.Component这个类的基础上自定义出一个个自己想要的类,这就是自己造的组件;组件这个东西嘛,就是用来复用的磨具,每次要插入什么东西时,就不用苦逼地自己重新去写一堆;这就是组件的生产力,以及魅力所在;然而组件的魅力不仅仅如此简单,而对每个组件可以有更多的设置,从而将JavaScript中的数据与HTML中的元素对象,进行高度绑定与交互


React不仅仅是一种工具,而是一种构建前端的方式;这种方式与jQuery的思维有一些不一样;但并不是说React强大而用jQuery的都是傻叉菜鸟,相反,React也不是傻叉。不同的技术方式、不同的JS库之间,大多情况下,并不是优劣之分,而是不同的特色自有不同的应用场景。对于React来说,确实是比jQuery更加复杂,也并不直观;React很强,但不应神化,它只是Facebook在处理前端复杂的数据交互过程中逐步标准化出来的一种开发方式与工具;因此,不难看出,React的适用场景更加是面对那种网页前端比较复杂的情况,尤其是那种数据与外观都很复杂,又适合组件化的这种场景;比如Facebook的信息流。


React 简介

上一节 下一节