react 入门知识

(持续更新中)

是什么

react 是 facebook 开源的一款前端组件解决方案。

下载

主页下载最新版本。解压下载好的压缩包。

build
examples
README.md

build中是react的源文件,examples中是简单的示例,可以直接打开运行(部分需要 http server支持)。

examples

basic

直接双击打开 examples/basic/index.html

可以看到 react 的组件正常运行, 计时器在不停地跳动。

这里可以进入 index.html 中查看一下代码,有比较重要的几块,分别说明一下:

  • 引入 react js
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>

react.js 是 react 的核心库, react-dom.js 是和 dom 操作相关的库。 可以看出 facebook 在做 react 时遵循的风格 – 尽量将源码依照功能分割。或者说,让每一个js文件尽量独立(增强可复用性),将复杂功能分而治之(降低整体代码复杂度)。

这个例子中没有涉及到下面这个 js

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

babel 是编译 jsx 语法的库。jsx 看起像是单纯的 html 代码。 依靠 jsx,我们可以不用在 js 代码中使用

"<h1></h1>"

来定义 html,而是可以直接书写 html 结构。

  • 定义组件
<script> var ExampleApplication = React.createClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.'; return React.DOM.p(null,message); } }); // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render var ExampleApplicationFactory = React.createFactory(ExampleApplication); var start = new Date().getTime(); setInterval(function() { ReactDOM.render( ExampleApplicationFactory({elapsed: new Date().getTime() - start}),document.getElementById('container') ); },50); </script>

解释一下,React.createClass 定义了一个组件类,其中, render的返回值就是组件的dom结构。

React.createFactory 为传入的组件类定义一个工厂方法,它能更具传入的参数,返回不同的组件对象。 这个,每一次传入的参数都是一个相对时间(当前时间 - 开始时间)。

ReactDOM.render,第一个参数是 react 组件对象,第二个参数是用于容纳组件的 dom 对象。这里采用原生 js 获取 dom 对象。 意在说明 react 不依赖任何第三方库。

使用 jsx

预编译 react 代码

使用 jsx 编写的代码必须先通过 babel 转化为可以在浏览器运行的 js,这一步通常会比较耗时间(相对原生js),react 官方推荐预编译 jsx 代码

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...