类组件

1.ES6如何创建组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import React from 'react'

class B extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <div>hi</div>
	}
}
  • 234行可以省掉(如果不需要在constructor里做什么的话)

2.props

  • 传数据给B组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class Parent extends React.Components{
    construtor(props){
	super(props)
    this.state = {name:'carri'}
    }
    onClick = () =>{}
    render(){
		return <B name={this.state.name}
                   onClick={this.onClick}
                   >hi</B>
    }
}
// 外部数据被包装为一个对象
// {name:'carri',onClick:...,children:'hi'}
// 此处onClick是一个回调
  • B组件
1
2
3
4
5
6
7
class B extends React.Component{
	constructor(props){
		super(props)
	}
	reder(){}
}
// 这么做了之后,this.props就是外部数据对象的地址了
  • 读取
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
class B extends React.Component{
	constructor(props){
		super(props)
	}
	reder(){
		return(
			<div onClick={this.props.onClick}>
			{this.props.name}
			{this.props.children}
			</div>
		)
	}
}
  • 写props
    • react的原则就是应该由数据的主人对数据进行更改
    • 不要自己修改props的值和属性

3.props的作用

  • 接受外部的数据
  • 接受外部的函数

4.state&setState

  • setState不会立即改变state,它是异步的
1
2
3
4
5
6
onClick=()=>{
	this.setState({x:this.state.x+1})
	this.setState({x:this.state.x+1})
}

// 只会加一次1
  • 函数型写法可以解决上面的问题
1
2
3
4
5
onClick2=()=>{
	this.setState((state)=>({x:state.x+1})
	this.setState((state)=>({x:state.x+1})
}

  • setState接受两个参数,第二个是fn(写入成功后执行的函数,不常见)
  • setState写时会自动进行shallow merge,但只对新的state和旧的state进行一级合并
  • this.state.n+=1 不推荐用,不render

类组件事件绑定

1.类组件事件绑定

1
2
3
4
5
6
7
8
class Welcome extends React.Component{
	addN=()=>this.setState({n:this.state.n+1})
	render(){
		return(
			<div onClick={this.addN}>111</div>
		)
	}
}

2.一个举例,为什么用箭头函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Person{
sayHi()
}

const p =new Person()
// p的sayHi方法在p._proto_上即Person.prototype上,原型上

class Person2{
sayHi2 = ()=>{}
}
// 等价于这种写法
class Person2{
constructor(){
this.sayHi2 =()=>{}
}
}

const p2 = new Person(2)
// p2的sayHi方法在p2自己身上,对象上


这是语法自己定义的