- React是一个用于构建用户界面的JavaScript库。
- 前端组件化:把一个大组件划分为多个小组件;
- react组件:一个类继承react.component类。
- import { Component } from ‘react’;
// 等价于
import React from ‘react’;
const Component = React.component - 有jsx语法时,一定要引用react;
在jsx语法中,自己写的组件,组件开头字母要大写;
在jsx语法中,以小写字母开头的组件是H5的原始标签;
在jsx语法中,要求一个组件的render函数返回的内容外层一定要有一个包裹元素;
在react 16版本里,react提供了Fragment占位符,可以作为包裹元素(组件的render函数返回的内容外层),不像div一样被显示出来;
在jsx语法中,如果使用js的变量或表达式,需要在外层加{}; - state的作用:负责存储组件里的数据;
改变state的数据,要调用this.setState方法;
在react里,有一种特性immutable(不可改变的),state 不允许我们做任何改变,只能使用setState修改state中的数据; - jsx中写注释:多行注释:{/注释内容/}
单行注释:{
//注释内容
} - li 标签的属性值dangerouslySetInnerHtml:让输入框中的标签不进行转译,以标签属性显示出来;
- 子组件如何调用父组件的方法来修改父组件的内容:只需把父组件的方法通过 this.props. 传给子组件,父组件传递过来的函数要做this绑定;
- 在新版react语法中,this.setState可以接收一个函数,而不是对象了;this.setState( ( ) => { } );并且函数需要有返回值return{ };
this.setState可以接收一个属性叫prevState;prevState等价于this.state; - 在每个库只管理自己的DOM时,react和jquery是可以共存的,互不干扰;
- react中,如何作父子组件的通信:
父–>子:父组件向子组件传值,子组件就可以接收到父组件的值了;
子–>父:子组件调用父组件传递过来的一个方法,来给父组件进行传值 - react单向数据流:只允许父组件向子组件传递数据,不允许子组件改变父组件传递过来的数据;
如果执意改变数据,则需要父组件传递给子组件一个方法,在子组件中调用这个方法,来改变父组件中的数据, - react :声明式开发:使得我们可以减少大量操作DOM代码量;
视图层框架:做大型项目时,只能用react搭建视图,做数据传值时,还要引入flex,redux数据层框架做额外支撑;
函数式编程:用react写出的项目更容易进行前端自动化测试;
可以与其他框架并存;
组件化;
单向数据流;
01-08
125
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-21