React入门基础

blockchain

概念

React 是一个用于构建用户界面的 JAVASCRIPT 库

特点

  • 声明式设计 −React采用声明范式,可以轻松描述应用。

  • 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

  • 灵活 −React可以与已知的库或框架很好地配合。

  • JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

  • 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简

安装

  • React 可以直接下载使用,官方也提供了很多学习的实例
  • 通过 npm 使用 React

第一个程序:hello world

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, world!</title>
<script src="../react/react-15.4.0/build/react.min.js"></script>
<script src="../react/react-15.4.0/build/react-dom.min.js"></script>
<!--让浏览器支持babel语法-->
<script src="../react/react-15.4.0/build/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
</script>
</body>
</html>
实例解析:

实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 babel.min.js

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - 用于将 JSX 语法转为 JavaScript 语法

注意:如果我们需要使用 JSX,则script标签的 type 属性需要设置为 text/babel

React JSX

特点:
  • React 使用 JSX 来替代常规的 JavaScript
  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化
  • 它是类型安全的,在编译过程中就能发现错误
  • 使用 JSX 编写模板更加简单快速
    基本使用:
1
2
3
4
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。

1
2
3
4
5
6
7
8
ReactDOM.render(
<div>
<h1>React教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "myvalue">这是一个很不错的 JavaScript 库!</p>
</div>,
document.getElementById('example')
);

注意:多个标签情况下外边一定要用一个div(或者其他元素)包裹,否则会报错!!!

样式使用:

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式:

1
2
3
4
5
var myStyle = { fontSize: 100, color: '#FF0000' };
ReactDOM.render(
<h1 style = {myStyle}>React教程</h1>,
document.getElementById('example')
);

注释使用:

注释需要写在花括号中,实例如下:

1
2
3
4
5
6
7
ReactDOM.render(
<div>
<h1>React教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);

数组使用:

JSX 允许在模板中插入数组,数组会自动展开所有成员:

1
2
3
4
5
6
7
var arr = [ <h1>小张</h1>, <h2>小李</h2>, ];
ReactDOM.render(
<div>
{arr}
</div>,
document.getElementById('example')
);

React 组件

封装一个输出 “Hello World!” 的组件,组件名为 HelloMessage:

1
2
3
4
5
6
7
8
9
var HelloMessage = React.createClass(
{ render: function() {
return <h1>Hello World!</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React 复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
以下实例我们实现了输出网站名字和网址的组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var WebSite = React.createClass({
render: function() {
return ( <div> <Name /> <Link /> </div> );
} });
var Name = React.createClass({
render: function() {
return ( <h1>百度</h1> );

} });
var Link = React.createClass({
render: function() {
return ( <a href='http://www.baidu.com/'>官方网址</a> );
} });
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);

React 组件生命周期

组件的生命周期可分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

生命周期的方法有:

  • componentWillMount 在渲染前调用,在客户端也在服务端
  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一

    起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用
  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用
  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用
-------------本文结束感谢您的阅读-------------