React Native学习之JSX与ReactJS

JSX

React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在Native上的体现!

JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法,最后每个HTML标签都转化为JavaScript代码来运行。

环境

ReactJS环境,如:

1
2
3
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>

载入方式

内联/外联,如

1
2
3
4
5
var HelloMessage = React.createClass({
render:function(){
return <h1>Hello {this.props.name}! <br />www.appblog.cn</h1>;
}
});

标签

  • HTML标签
  • ReactJS创建的组件类标签(首字母一定要大写)

转换(解析器)

1
2
3
<h3>输入</h3>
//转换成
React.createElement("h3", null, "输入"); //返回一个ReactElement对象

执行JavaScript表达式

1
2
3
4
var msg = "www.appblog.cn";
<h1>{msg}</h1>
//转换成
React.createElement("h1", null, msg);

注释

  • 单行://
  • 多行:/*注释文本*/

属性

1
2
3
var msg = <h1 width="10px">www.appblog.cn</h1>
//转换成
React.createElement("h1", {width:"10px"}, "www.appblog.cn")

延展属性

使用ES6的语法

1
2
3
4
5
6
var props = {};
props.foo = "1";
props.bar = "1";
<h1 {...props} foo="2" >www.appblog.cn</h1>
//转换成
React.createElement("h1", React.__spread({}, props, {foo:"2"}), "www.appblog.cn");

自定义属性

HTML5给出的方案,凡是以data-开头的自定义属性,可渲染到页面

显示HTML

显示一段HMTL字符串,而不是html节点

借助一个属性 _html

1
<div>{{_html:'<h1>www.appblog.cn</h1>'}}</div>

样式的使用

style属性:外层{}按照JSX语法,内层{}是JavaScript对象

1
2
3
4
5
var HelloMessage = React.createClass({
render:function(){
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}! <br />www.appblog.cn</h1>;
}
});

样式的使用事件绑定

注意:onClick 调用bind方法(第一个参数是设定的作用域,第二个参数是要传递的参数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React事件绑定</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

function testClick(msg){
alert(msg);
}

var app=<button onClick={testClick.bind(this, 'hello')} style={{
backgroundColor:'#ff0000',
fontSize:'28px',
width:'200px',
height:'50px'
}} >点击我吧</button>

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

ReactJS

ReactJS核心思想:组件化

  • 每个组件维护自己的状态和UI,并且能够自动重新渲染
  • 多个组件组成了一个ReactJS应用

顶层API

React是全局对象

  • React.createClass:创建组件类的方法
  • React.render:渲染,将指定组件渲染到指定DOM节点

注:React.render 被 ReactDOM.render 替代

组件API

  • render:组件级API,返回组件的内部结构
  • 组件生命周期API

ReactJS组件生命周期

创建阶段

getDefaultProps:处理props的默认值,在React.createClass调用

实例化阶段

React.render 启动之后依次调用:

getInitialStatecomponentWillMountrendercomponentDidMount

state:组件的属性,主要是用来存储组件自身需要的数据,每次数据的更新都是通过修改state属性的值,ReactJS内部会监听state属性的变化,一旦发生变化,则主动触发组件的render方法来更新虚拟DOM结构

虚拟DOM:将真实的DOM结构在内存中映射成一个JSON数据结构

更新阶段

主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。更新行为依次调用:

componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate

销毁阶段

销毁时被调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。调用:

componentWillUnmount

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React组件的生命周期</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass({
//1、创建阶段
getDefaultProps:function(){
//在创建类的时候被调用,this.props处理该组件的默认属性
console.log("getDefaultProps");
return {};
},

//2、实例化阶段
getInitialState:function(){
//初始化组件的state值,其返回值会赋值给组件的this.state属性
//获取this.state的默认值
console.log("getInitialState");
return {};
},

componentWillMount:function(){
//在render之前调用此方法
//业务逻辑的处理都应该放在这里,如对state的操作等
console.log("componentWillMount");
},

render:function(){
//根据state值,渲染并返回一个虚拟DOM
console.log("render");
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!<br />www.appblog.cn</h1>;
},

componentDidMount:function(){
//该方便发生在render方法之后
//在该方法中,ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
//组件内部可以通过this.getDOMNode()来获取当前组件的节点
console.log("componentDidMount");
},

//3、更新阶段,主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整
componentWillReceiveProps:function(){
//该方法发生在this.props被修改或父组件调用setProps()方法之后
//调用this.setState方法来完成对state的修改
console.log("componentWillRecieveProps");
},

shouldComponentUpdate:function(){
//用来拦截新的props或state,根据逻辑来判断
//是否需要更新
console.log("shouldComponentUpdate");
return true;
},

componentWillUpdate:function(){
//shouldComponentUpdate返回true的时候执行
//组件将更新
console.log("componentWillUpdate");
},

componentDidUpdate:function(){
//组件更新完毕,我们常在这里做一些DOM操作
console.log("componentDidUpdate");
},

//4、销毁阶段
componentWillUnmount:function(){
//销毁时被调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作
console.log("componentWillUnmount");
}
});

ReactDOM.render(<HelloMessage name="React 语法基础" />, document.getElementById('example'));

</script>
</body>
</html>

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :