React 快速介绍

原文: http://words.taylorlapeyre.me/an-introduction-to-react
作者: Taylor Lapeyre

根据他们自己的定义,React 是"一个用于构建用户界面的 JavaScript 类库".
我第一次读到 React 的时候,它作为前端 JavaScript 的一个好方案马上打动了我.
用 React 做了些小项目以后,我的结论是它到底是一个很强大的框架.
这篇文章里,我要描述怎样尽可能快运行起 React.

JSX: React 的语法

React 使用的是特殊的 JavaScript 语法,叫做 JSX.
主要的目标是提供一个能表示 React 内部的 DOM 的符合直觉的语法糖,
这套内部的 DOM 被 React components 所使用,是构建 React 应用的城砖.
React 关于 JSX 的官方教程 上其他的用法也很好懂.

你的应用里使用 JSX 有多重方法,但最终 JSX 代码会被编译到平常的 JavaScript.
第一种,也是最简单的一种办法,是引入 React 的 JSXTransformer.js 文件,
这个文件提供了将标记了 JSX 的 JavaScript 代码编译到普通 JavaScript 的方法.

我更喜欢第二种,就是预先编译好 JSX 代码.
这个通过 React 的 JSX 命令行工具做起来最简单:

$ npm install -g react-tools
$ cd project/
$ jsx --watch src/ build/

这样以后,使用 JSX 只要在你的 HTML 文件中引用 build/whatever.js就好了.

开始运行

搞清楚你想用哪一种处理 JSX 的方案以后,运行 React 就很平常了.
直接下载 react.js (或者指向 cdn),再引用对应文件到 HTML 文档的头部:

<html>
    <head>
        <script src="react.js"></script>
        ...
    </head>
    <body>
        ...
        <script src="mine.js"></script>
    </body>
</html>

React 不依赖第三方的类库(比如 jQuery),所以不用去担心.
只是,要注意在文档内容加载完成的位置引用你自己的代码文件.

Components: React 的城砖

React 当中,components 是构建应用核心的城砖.
component 是各自独立的,模块化,在应用当中是动态的 HTML 的表示.
component 经常会是其他 React component 的子模块.
这在下面的文本当中更明确:

/** @jsx React.DOM */
var Thing = React.createClass({
  render: function() {
    return (


<p>{this.props.name}</p>


    );
  }
});

var ThingList = React.createClass({
  render: function() {
    return (


<h1>My Things:</h1>,<Thing name="Hello World!" />
    );
  }
});

React.renderComponent(
  <ThingList />,document.querySelector('body')
);

这个例子里,renderComponent 把一个 component 渲染到给定的 DOM 节点,启动应用.

如果这是你第一次接触 React,其他一些东西会让你感到非常奇怪.

这是把 HTML.. 写在 JavaScript 里了?

不完全是. 你看到的是 JSX 的样子,这几行看着像 HTML,实际上不代表 DOM 节点.
实际上,他们只是语法糖,表示 React 内部的 DOM,其中也包含了你前面定义的那些.
花括号里的代码在语法当中被"转义"了.
来看一下预编译后的 ThingList class:

var ThingList = React.createClass({displayName: 'ThingList',render: function() {
    return (
      React.DOM.h1(null,"My Things:"),Thing( {name:"Hello World!"} )
    );
  }
});

如果这个版本对你来说更有意义,那可以说达到预期了.
我刚用 React 的时候,我非常看不惯 HTML 式的语法.
然而当你的应用一步步变得复杂起来,你会开始很奇妙地赞赏 JSX 语法了. 比如:

var ComplexThing = React.createClass({
  render: function() {
    return (


<div className="complexThing">
        <Thing name="thing one" />
        <Thing name="thing two" />
      </div>,<a href="back.html">Go Back</a>
    );
  }
});

// 对比下面,非 JSX 的版本:

var ComplexThing = React.createClass({displayName: 'ComplexThing',render: function() {
    return (
      React.DOM.div( {className:"complexThing"},Thing( {name:"thing one"} ),Thing( {name:"thing two"} )
      ),React.DOM.a( {href:"back.html"},"Go Back")
    );
  }
});

Components 和 State

我前面的例子你可能已经注意到陌生的内容了 this.props.name.
props 是哪里来的? 用来做什么?

每个 React component 都接收传入的属性,定义在特定 component 实例上的不可变信息.
你可以把 this.props 想象成被传入函数当中的参数.
但是,因为他们是不可变的,component 被渲染后这些属性就不能被改变了.
然后 state 根据需要被引入了.

出了上边不可变的属性,React 还有个私有属性 this.state.
当 state 被更新,component 就自动刷新渲染.

/** @jsx React.DOM */
var StatefulThing = React.createClass({
  updateName: function(event) {
    event.preventDefault();
    this.state.name = "Taylor";
  },setInitialState: function() {
    return (
      {name: "World"}
    );
  },render: function() {
    return (
      <a href="#" onClick={this.updateName}>
        My name is {this.state.name}
      </a>
    );
  }
});

React 用驼峰命名法来绑定事件 handler,用这个函数来处理 event.

有一点注意一下,目前我们看到所有的例子都没有对你的应用的其他部分做什么设定.
React 仅仅是一个前端开发框架. 跟 Backbone.js 那样的框架不同,
React 希望你自己处理跟服务器获取和发送数据的工作.
这使得 React 作为一个前端的解决方案很好部署,因为它仅仅要求你给它传入数据.
React 会自己完成其他工作.

希望这篇文章能让你了解到 React 是如何工作的.
如果你想学更多,我推荐 React 官方的教程,里面关于 React 的功能做了更广泛的说明.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom