React ----- 02 react JSX语法（1）
1 复习：JavaScript中类的定义
- 1.1 ES5中类的定义
// ES5中定义类
function Person(name,age){
this.name = name;
this.age = age;
}
//函数一般加在原型上
Person.prototype.say = function(){
console.log(this.name,this.age,'say');
}
var p = new Person('kobe','40');
console.log(p.name, p.age); //kobe 40
p.say(); //kobe 40 say
- 1.2 ES6中类的定义
// ES6中定义类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name, this.age, 'say');
}
}
var p = new Person('sunwukong',500);
console.log(p.name,p.age); //sunwukong 500
p.say(); //sunwukong 500 say
- 1.3 ES6中类的继承
减少代码冗余：
// ES6中定义类的继承
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name, this.age, 'say');
}
}
class Student {
constructor(name,age,num){
this.name = name;
this.age = age;
this.num = num;
}
}
class Teacher {
constructor(name,age,skill){
this.name = name;
this.age = age;
this.skill = skill;
}
}
使用ES6继承减少冗余代码：
// ES6中定义类的继承
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name, this.age, 'say');
}
}
//定义一个student类来继承Person
class Student extends Person {
constructor(name,age,num) {
//继承父类的 name，age，以及方法 say
super(name,age);
this.num = num;
}
}
const st1 = new Student('kobe',18,'04183006');
console.log(st1);
//{name: "kobe", age: 18, num: "04183006"}
st1.say();
// kobe 18 say
//定义一个Teacher类来继承Person
class Teacher extends Person {
constructor(name,age,skill) {
super(name,age);
this.skill = skill;
}
}
const te1 = new Teacher('mr,wang',40,'sing');
console.log(te1);
//{name: "mr,wang", age: 40, skill: "sing"}
te1.say();
//mr,wang 40 say
2 JSX核心语法（1）
- 2.1.1 使用react渲染一个电影列表(遍历数组第一种写法)
render() {
return (
<div>
<h2>电影列表</h2>
<ul>
{
this.state.movieList.map((item) => {
return <li>{item}</li>
})
}
</ul>
</div>
)
}
- 2.1.2 使用react渲染一个电影列表(遍历数组第二种写法)
render() {
let liArray = [];
for(let movie of this.state.movieList) {
liArray.push(<li>{movie}</li>)
}
return (
<div>
<h2>电影列表</h2>
<ul>
{liArray}
</ul>
</div>
)
}
- 2.1.3 使用react渲染一个电影列表(完整代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<!-- 1.引入依赖 -->
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<!-- 2.代码开发 -->
<script type="text/babel">
class APP extends React.Component {
constructor() {
super();
this.state = {
message:'Hello World!',
movieList:['大闹天宫','红孩儿','海王','阿甘正传']
}
}
render() {
let liArray = [];
for(let movie of this.state.movieList) {
liArray.push(<li>{movie}</li>)
}
return (
<div>
<h2>电影列表</h2>
<ul>
{liArray}
</ul>
</div>
)
}
}
ReactDOM.render(<APP/>,document.getElementById('app'));
</script>
</body>
</html>
- 2.1.4 使用react完成一个计数器(完整代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
class APP extends React.Component {
constructor(props) {
super(props);
this.state = {
counter:1
}
}
render() {
return (
<div>
<h2>当前计数：{this.state.counter}</h2>
<button onClick={this.increament.bind(this)}>+1</button>
<button onClick={this.decreament.bind(this)}>-1</button>
</div>
)
}
//定义函数
increament(){
this.setState({
counter: this.state.counter + 1
})
}
decreament(){
this.setState({
counter: this.state.counter - 1
})
}
}
ReactDOM.render(<APP/>,document.getElementById('app'));
</script>
</body>
</html>
3 ：认识JSX语法
- 1.1 JSX语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
//JSX语法
const element = <h2>hello world!</h2>
ReactDOM.render(element,document.getElementById('app'));
</script>
</body>
</html>
JSX语法(all in js)?
需要配合type="text/babel"使用。也被叫做JavaScript XML.
主要用于描述我们的UI界面，并且可以完成和JavaScript融合在一起使用，灵活性
为什么react选择了js?
react认为渲染逻辑本质上与其他UI逻辑存在内在耦合。
UI需要绑定事件，UI中需要动态展示数据。他们之间密不可分，react将他们组合在一起，也就是组件。
JSX语法要求?
1.JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素。
2.为了方便阅读，我们通常在JSX外层包裹一个小括号(),也可以支持我们JSX换行书写。
3.JSX中可以写双标签，也可以写单标签。 单标签必须以结尾。
- 1.2 JSX注释语法
render() {
return (
<div>
{/*我是一段注释*/}
hello world!
</div>
)
}
-
1.3 JSX语法-如何嵌入变量
- 1.3.1 在{}可以正常显示的类型
this.state = { name:'mr.wang', //String age:18, //Number names:['abc','bnc','ppp'] //Array }- 1.3.2 在{}中不能正常显示的类型
this.state = { test1:null, //Null test2:undefined, //Undefined test3:true //Boolean }为什么react不让这些类型展示？
当我们请求数据出现错误的时候，不让他显示在页面上。
//当test1不为null的时候展示data，否则展示null
{test1 ? data : null; }
//当test3为true展示data
{test3 && data}-
1.3.3 需要展示这些数据的时候
使用String() 直接转换。 或者拼接空字符串，或者对由toString() 方法的类型进行转换。 -
1.3.4 对象不能作为jsx的子类（不能直接渲染对象）
-
1.4 JSX语法-如何嵌入表达式
render() {
const {firstName, lastName, isLogin} = this.state;
return (
<div>
{/*运算符表达式*/}
{/*拼接字符串*/}
<h2>{firstName + ' ' + lastName}</h2>
{/*数据计算*/}
<h2>{20 * 50}</h2>
{/*三元表达式*/}
<h2>{ isLogin? '欢迎回来~': '请先登录~'}</h2>
{/*进行函数调用*/}
<h2>{this.getFullName()}</h2>
</div>
)
}
getFullName(){
return this.state.firstName + " " + this.state.lastName
}
心有所向，虽远亦往！