react学习

1. react根本

1.1 es6语法

ES 6是JavaScript语言的新一代标准。React的项目一般都是用ES 6语法来写的。
1.let const

let和const是ES 6中新增的两个关键字，用来声明变量。
const声明一个只读的常量，一旦声明，常量的值就不能改变。
2.箭头函数

ES 6允许使用“箭头”（=>）定义函数。
例如：

1. var f = (a, b) => a + b;

复制代码

3.模板字符串

模板字符串是加强版的字符串，用反引号（`）标识字符串。
它可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。

1. //多行字符串
2. 'JS is wonderful !
3. React is wonderful! '
4. //字符串中嵌入变量
5. var name = "React";
6. 'Hello, ${name} ! ';

复制代码

4.解构赋值

ES 6允许按照一定模式从数组和对象中提取值，对变量举行赋值，
这被称为解构。

1. //数组解构
2. let [a,b,c] = [1, 2, 3];
4. //对象解构
5. let name = 'Lily';
6. let age = 4;
7. let person = {name, age};
8. person // Object {name: "Lily", age: 4}
10. //对象解构的另一种形式
11. let person = {name: 'Lily', age: 4};
12. let {name, age} = person;
13. name // "Lily"
14. age //4
16. //嵌套结构的对象解构
17. let {person: {name, age}, foo} = {person: {name: 'Lily',
18. age: 4}, foo: 'foo'};
19. name //"Lily"
20. age //4
21. foo //"foo"

复制代码

5. rest参数

ES 6引入rest参数（形式为…变量名）用于获取函数的多余参数，以取代arguments对象的使用。rest参数是一个数组，数组中的元素是多余的参数。

1. function languages(lang, ...types){
2. console.log(types);
3. }
4. languages('JavaScript', 'Java', 'Python'); //["Java",
5. "Python"]

复制代码

6. 扩展运算符

扩展运算符是三个点（…），它将一个数组转为用逗号分隔的参数序列，类似于rest参数的逆运算。

1. function sum(a, b, c){
2. return a + b + c;
3. }
4. let numbers = [1, 2, 3];
5. sum(...numbers); //6

复制代码

扩展运算符还常用于合并数组以及与解构赋值结合使用。

1. //合并数组
2. let arr1 = ['a'];
3. let arr2 = ['b', 'c'];
4. let arr3 = ['d', 'e'];
5. [...arr1, ...arr2, ...arr3]; //['a', 'b', 'c', 'd', 'e'];
7. //与解构赋值结合
8. let [a, ...rest] = ['a', 'b', 'c'];
9. rest //['b', 'c']

复制代码

扩展运算符还可以用于取出参数对象的全部可遍历属性，复制到当
前对象之中。

1. let bar = {a: 1, b: 2};
2. let foo = {...bar};
3. foo //Object {a: 1, b: 2};
4. foo === bar //false

复制代码

7. class

ES 6引入了class（类）这个概念，新的class写法让对象原型的写法
更加清楚，也更像传统的面向对象编程语言的写法。

1. //定义一个类
2. class Person {
3.         constructor(name, age) {
4.                 this.name = name;
5.                 this.age = age;
6.         }
7.         getName(){
8.                 return this.name;
9.         }
10.         getAge(){
11.                 return this.age;
12.         }
13. }
15. //根据类创建对象
16. let person = new('Lily', 4);

复制代码

class之间可以通过extends关键字实现继承

1. class Man extends Person {
2.         constructor(name, age) {
3.                 super(name, age);
4. }
5.         getGender() {
6.                 return 'male';
7.         }
8. }
9. let man = new Man('Jack', 20);

复制代码

8. import、export

ES 6实现了本身的模块化标准。
export用于规定模块对外暴露的接口，import用于引入其他模块提供的接口。

1. //a.js，导出默认接口和普通接口
2. const foo = () => 'foo';
3. const bar = () => 'bar';
4. export default foo; //导出默认接口
5. export {bar}; //导出普通接口
7. //b.js(与a.js在同一目录下)，导入a.js中的接口
8. //注意默认接口和普通接口导入写法的区别
9. import foo, {bar} from './a';
10. foo(); //"foo"
11. bar(); //"bar"

复制代码

1.2 JSX

JSX 是一种用于描述UI的JavaScript扩展语法，React使用这种语法
描述组件的UI。
React 认为，一个组件应该是具备UI描述和UI数据的完备体，不应该将它们分开处理，于是发明白JSX，作为UI描述和UI数据之间的桥梁。
1.2.1 JSX语法

1 根本语法

JSX的根本语法和XML语法相同，都是使用成对的标签构成一个树
状布局的数据

1. const element = (
2. <div>
3. <h1>Hello, world!</h1>
4. </div>
5. )
7. const element = <h1>Hello, world!</h1>;

复制代码

2 标签类型

在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、
span等）和React组件类型的标签。
当使用DOM类型的标签时，标签的首字母必须小写；当使用React组件类型的标签时，组件名称的首字母必须大写。React 正是通过首字母的大小写判定渲染的是一个DOM类型的标签还是一个React组件类型的标
签。

1. // DOM类型标签
2. const element = <h1>Hello, world!</h1>;
3. // React组件类型标签
4. const element = <HelloWorld />;
5. // 二者可以互相嵌套使用
6. const element = (
7.         <div>
8.                 <HelloWorld />
9.         </div>;
10. )

复制代码

3 JavaScript表达式

在JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来。
表达式在JSX中的使用场景主要有两个：通过表达式给标签属性赋值和通过表达式定义子组件。

1. // 通过表达式给标签属性赋值
2. const element = <MyComponent foo={ 1 + 2 } />

复制代码

1. // 通过表达式定义子组件(map虽然是函数，但它的返回值是JavaScript表达
2. 式)
3. const todos = ['item1', 'item2', 'item3'];
4. const element = (
5. <ul>
6. {todos.map(message => <Item key={message} message=
7. {message} />)}
8. </ul>
9. );

复制代码

注意，JSX中只能使用JavaScript表达式，而不能使用多行JavaScript语句。

1. // 错误
2. const element = <MyComponent foo={const val = 1 + 2; return val; } />
4. // 错误
5. let complete;
6. const element = (
7.         <div>
8.                 {
9.                         if(complete){
10.                                 return <CompletedList />;
11.                         }else{
12.                                 return null;
13.                         }
14.                 }
15.         </div>
16. )

复制代码

不过，JSX中可以使用三目运算符或逻辑与（&&）运算符取代if语
句的作用。

1. // 正确
2. let complete;
3. const element = (
4. <div>
5. {
6. complete ? <CompletedList /> : null
7. }
8. </div>
9. )
11. //正确
12. let complete;
13. const element = (
14. <div>
15. {
16. complete && <CompletedList />
17. }
18. </div>
19. )

复制代码

4 标签属性

当JSX 标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等。但是，部门属性的名称会有所改变，主要的变化有：class 要写成className，变乱属性名接纳驼峰格式，例如onclick 要写成 onClick。原因是，class是JavaScript的关键字，以是改成className；React对DOM标签支持的变乱重新做了封装，
封装时接纳了更常用的驼峰命名法命名变乱。

1. <div id='content' className='foo' onClick={() =>
2. {console.log('Hello, React')}} />

复制代码

5 解释

JSX中的解释需要用大括号“{}”将/**/包裹起来。

1. const element = (
2. <div>
3. {/* 这里是一个注释 */}
4. <span>React</span>
5. </div>
6. )

复制代码

6 解释

JSX语法对使用React来说并不是必需的，现实上，JSX语法只是
React.createElement (component, props, …children)的语法糖，全部的JSX
语法终极都会被转换成对这个方法的调用。

1. //JSX语法
2. const element = <div className='foo'>Hello, React</div>
4. //转换后
5. const element = React.createElement('div', {className:
6. 'foo'}, 'Hello, React')

复制代码

1.3 组件

1 组件定义

定义一个组件有两种方式，使用ES 6 class（类组件）和使用函数（函数组件）。
使用class定义组件需要满意两个条件：
（1）class继承自React.Component。
（2）class内部必须定义render方法，render方法返回代表该组件UI
的React元素。
假设定义了一个PostList组件。如何使组件表现到页面上呢？
需要使用ReactDOM.render() 完成这一个工作

1. // index.js
2. import React from "react";
3. import ReactDOM from "react-dom";
4. import PostList from "./PostList";
6. ReactDOM.render(<PostList />,
7. document.getElementById("root"));

复制代码

注意，使用ReactDOM.render() 需要先导入react-dom库，这个库会完成组件所代表的虚拟DOM节点到浏览器的DOM节点的转换。
2 组件的props

组件的props用于把父组件中的数据或方法通报给子组件，供子组件使用。
props是一个简单布局的对象，它包含的属性正是由组件作为JSX标签使用时的属性组成。

1. <User name='React' age='4' address='America' >
3. 此时User组件的props结构如下：
4. props = {
5.         name: 'React',
6.         age: '4',
7.         address: 'America'
8. }

复制代码

3 组件的state

组件的state是组件内部的状态，state的变化终极将反映到组件UI的变化上。
我们在组件的构造方法constructor中通过this.state定义组件的初始状态，并通过调用this.setState方法改变组件状态（也是改变组件状态的唯一方式），进而组件UI也会随之重新渲染。

1. // 点赞的例子
2. import React, { Component } from "react";
4. class PostItem extends Component {
5.   constructor(props) {
6.     super(props);
7.     this.state = {
8.       vote: 0
9.     };
10.   }
12.   // 处理点赞逻辑
13.   handleClick() {
14.     let vote = this.state.vote;
15.     vote++;
16.     this.setState({
17.       vote: vote
18.     });
19.   }
21.   render() {
22.     const { title, author, date } = this.props;
23.     return (
24.       <li>
25.         <div>
26.           {title}
27.         </div>
28.         <div>
29.           创建人：<span>{author}</span>
30.         </div>
31.         <div>
32.           创建时间：<span>{date}</span>
33.         </div>
34.         <div>
35.           <button
36.             onClick={() => {
37.               this.handleClick();
38.             }}
39.           >
40.             点赞
41.           </button>
42.           &nbsp;
43.           <span>
44.             {this.state.vote}
45.           </span>
46.         </div>
47.       </li>
48.     );
49.   }
50. }
52. export default PostItem;

复制代码

注意
（1）在组件的构造方法constructor内，首先要调用super(props)，这一步现实上是调用了React.Component这个class的constructor方法，用来完成React组件的初始化工作。
（2）在constructor中，通过this.state定义了组件的状态。
（3）在render方法中，我们为标签定义了处理点击变乱的相应函数，在相应函数内部会调用this.setState更新组件的点赞数。
组件的props和state都会直接影响组件的UI。事实上，React组件可以看作一个函数，函数的输入是props和state，函数的输出是组件的UI。
UI = Component(props,state)
React组件正是由props和state两种类型的数据驱动渲染出组件UI。props是组件对外的接口，组件通过props吸收外部传入的数据（包罗方法）；state是组件对内的接口，组件内部状态的变化通过state来反映。别的，props是只读的，你不能在组件内部修改props；state是可变的，组件状态的变化通过修改state来实现。
4 有状态组件和无状态组件

如果一个组件的内部状态是稳固的，当然就用不到state，这样的组件称之为无状态组件。
一个组件的内部状态会发生变化，就需要使用state来保存变化，这样的组件称之为有状态组件。
定义无状态组件除了使用ES 6 class的方式外，还可以使用函数定义，也就是我们在本节开始时所说的函数组件。
一个函数组件吸收props作为参数，返回代表这个组件UI的React元素布局。

1. function Welcome(props) {
2.         return <h1>Hello, {props.name}</h1>;
3. }

复制代码

React应用组件设计的一般思路是，通过定义少数的有状态组件管理整个应用的状态变化，并且将状态通过props通报给其余的无状态组件，由无状态组件完成页面绝大部门UI的渲染工作。总之，有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注组件UI的渲染。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。