以下内容,当具备ES6,JS语法,node环境,前端组件基础概念,写过java代码,包你3天上手React项目,下面开始...

react介绍

1. react: 一个js框架,让开发者可以在js中写htML代码,也就是jsx语法,称为虚拟dom(类似一个js对象)
2. react-dom: 挂载节点,将jsx写的虚拟dom变成真的dom
3. render: 每次都是新旧虚拟dom之间进行比较,之后才会生成真实dom

创建react项目

命令行使用 npx create-react-app my-app-name 即可创建项目

react中组件(子父之间传值)

A: 父组件 B: 子组件
在A.js文件中使用<B name={name} getName={this.getName}> 其中name为A文件中一个变量,getName为A文件中一个方法
在B.js文件中,可直接使用this.PRops.name或this.props.getName或const { name, getName } = this.props来得到A中变量,或运行A中方法,最后一种最常用,这种方式是ES6中新增的解构赋值.
父->子 通过子标签上加上属性的方式,直接传递,在子重使用this.props来接住属性
子->父 通过在子中调用父传递的方法来完成

具体使用场景: 一个页面右上角挂载一个三级联动选项卡(三级数据从接口获取),main作为父组件主页面,select作为子组件三级选项卡页面

1. main页面负责ajax请求,拿总数据,为子组件准备好所有即插即用数据和方法,在使用select标签的时候,全部传递给子
2. select页面,在this.props中负责解构所有数据和方法,直接使用,无需关心逻辑实现
3. main叫逻辑组件(聪明组件), select叫UI组件(笨蛋组件)

JSX语法

1. 在js中直接写html语法,也可以使用自定义标签,比如可以写自己组件,App组件可以写成 <App />,首字母必须大写开头,JSX标签中,大写开头,基本都是组件,小写开头基本是html标签
2. render中用JSX语法写html代码,必须在最外层包括一个div,不然编译会报错,在16版本中,如果使用Fragment来表示占位符,在html中显示的时候,可去掉组件最外层的那个div.
3. 使用js表达式需要使用{}把表达式包裹起来
4. html标签中进行事件绑定,事件名称首字母必须大写,比如 onChange中C就是大写的
5. 在html样式中,使用className来代替class
6. 使用dangerouslySetInnerHTML={{__html: ITem}},可在提交数据的时候,对数据中html标签进行转义处理
7. <label for="insertArea">输入内容</label> for需要换成htmlfor

事件绑定(带参数绑定)

jsx绑定事件,如果事件中要传递参数,应该像下面那样传递

<li onClick={(index) => this.props.delItem(index)}>{item}</li>

构造函数

只会执行一次,一般在这里是接收父的props数据,然后来初始化自己的state

state和props和render

state: 组件自己内部维护数据,可根据实际逻辑进行赋值,更改等操作
props: 父->子,所有传递过来的数据都附加在Props中,子在props中可以拿到所有父传递过来的数据
render: 只要state进行set操作,render一定会执行,包括父state进行set之后,父和子的render都会被执行

ajax接参数

1. 子组件是UI组件,接完父组件数据直接使用,可直接在子组件props中直接使用父组件ajax请求获取到的数据
2. 子组件需要将父组件ajax数据赋值到自己的state中,只能在componentWillReceiveProps生命周期中处理,不能在constructor中处理,原因: 父组件ajax请求最起码第二次render父组件,而子组件中constructor只会执行一次

生命周期(重要)

react中this指向

1. 自定义函数的时候,写自定义函数,需要在constructor中进行函数this指向的绑定
2. 在constructor中进行this指向绑定,然后写正常函数

// 方式1
  getTodoItem = () => {
    // 你的逻辑
  }
// 方式2
 constructor(props) {
    super(props)
    this.inputOnChange = this.inputOnChange.bind(this)
  }
 inputOnChange() {
    // 你的逻辑
  }

两款chrome插件

1. React Developer Tools // F12,查看每个react组件中state和props的值
2. redux DevTools // F12,查看redux中Store的值