您的位置：首页 > Web前端 > React

react 入门知识

2015-11-30 20:48 573 查看

（持续更新中）

介绍

react 是 facebook 开源的一款前端组件库。

准备

纯玩

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

build
examples
README.md

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

node 平台

在node平台上开发会方便很多。但是需要一些其他的技能，如 babel，gulp

babel 和 react preset 的配合可以编译 react 的代码（将jsx编译成js，详见下文）。而 gulp 及其 watch 可以进行实时的编译，方便开发。

我写了一个demo，展示了这种开发方式，react-sass-webpack-on-gulp

开始

入门

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

var Title = React.createClass({
render: function(){
return <div>
<h1>Hello World</h1>
<hr/>
</div>
}
});

ReactDOM.render(
<Title />,
document.getElementById('example')
);
</script>
</body>
</html>

效果图：

react 源文件

react.js 是 react 的核心库，

react-dom.js 是和 dom 操作相关的库。

babel 是编译 jsx 语法的库。jsx 看起像是单纯的 html 代码。 jsx 必须是闭合的标签。

定义组件

React.createClass 定义了一个组件类，其中， render的返回值就是组件的模板。

模板引用变量要用大括号

<h1>{title}</h1>

注意script标签的 type，必须定义为 text/babel。babel 会主动解析这个标签里面的脚本。

<script type="text/babel">

使用组件

ReactDOM.render 将组件挂载到页面，第一个参数是 react 组件对象，第二个参数是用于容纳组件的 dom 对象。

state

state存储组件的状态，可以更新。

this.setState({name:'new name'});

props

props存储外部传递给组件的数据。

传递：

<Title name={name}/>

使用：

组件可以通过 props 访问这个name

var name = this.props.name;

看起来 state 和 props 都可以保存数据，实际使用的时候，state 用来存储组件数据， props 只用于接收其他模块传递的数据。当这些数据在其他模块被更新，相应的 props 中的数据也会被更新。所以，props 可以做单向的数据传递，控制。

获取 dom

有些时候，需要获取真实的dom，比如，获取input的值。这里需要先在input上设置 ref属性。

<div>
<input type="text" name="username" ref="username" onClick={this.handleClick}/>
</div>

handleClick 是点击事件的回调。除了 click，react 还支持 select，touch，等事件。具体参见 supported-events

下面是事件回调：

handleClick:function(){
var username = ReactDOM.findDOMNode(this.refs.username).value;
}

ReactDOM.findDOMNode（refName）就能获取到真实的 dom 了。需要注意的是，获取 dom 必须等待真正的 dom 插入之后，否则会报错。这里，点击事件发生的时候，dom必然已经插入，所以没问题。

style

html 标签里是可以定义字符串类型的 style ，但是组件的 style 不同。

必须传入一个对象

style = {obj}

也可以这样

style = {{position:'relative'}}

上面的第一层括号表示取值，第二层括号定义对象。

class 和 for

设置 class 和 for 属性时，由于 class 和 for 都是 js 的保留字，所以必须分别使用 className 和 htmlFor 替代。

生命周期

预编译 react 代码

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

参考

官方文档

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航