react组件传值、react组件分类结构

1
2
3
4
5

function MyCom1(){
return <div>这是函数式组件的组件模板</div>
}

1
2
3
4
5
6
7
8

class MyCom2 extends React.Component{
// 类组件的模板需要通过render函数return出去
render(){
return <div>这是类组件的组件模板</div>
}
}

1
2
3
4
state = {
name:"张三"
}

1
2
3
4
5
6
7
8
 constructor(){
super()//必选，调用父类构造器，用于继承
console.log(this); //当前组件
this.state={
age:10
}
}

1
2
3
4
5
6
7
8
9

nameChange1(){
console.log(this);//undefined
// 组件中的函数，默认this为undefined，不是当前组件
}
nameChange2=()=>{
console.log(this);//当前组件
}

1
2
<input value={this.state.name} onChange={this.nameChange3.bind(this)} />

1
2
3
4
5
6
7
8

constructor(){
super()//必选，调用父类构造器，用于继承
console.log(this); //当前组件
// 在组件的构造器中提前修改函数的this指向，模板中调用函数内部this就有值
this.nameChange4 = this.nameChange4.bind(this)
}

1
2
3
4
5

<button onClick={()=>{
console.log(this);
}}>求和</button>

1
2
3
<button onClick={this.add}
data-a="3" data-b="4" >求和</button>

1
2
3
4
5
6
7
8

add(...params){
// 使用自定义属性传参，函数的参数默认是事件信息对象e
console.log(params[0].currentTarget.dataset);
var data = params[0].currentTarget.dataset
console.log(data.a*1 + data.b*1);
}

1
2
<button onClick={this.add1.bind(this,3,4)}>求和</button>

1
2
3
4
5
6

add1(...params){
// 使用bind函数传参，函数的参数前边是bind传入的参数，最后一个参数是事件对象e
console.log(params[0],params[1],params[2]);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 render(){
console.log("render");
// 特别注意：在render函数中不能写数据更新setState，因为数据更新会调用render试图更新，如果在render中再调用数据更新，则会进去死循环
this.setState({
name:"lisi"
})
return (
<div>
{/*在模板中调用state和函数都需要this打点调用*/}
<input value={this.state.name} onChange={this.nameChange1} />
<input value={this.state.name} onChange={this.nameChange2} />
<input value={this.state.name} onChange={this.nameChange3.bind(this)} />
<input value={this.state.name} onChange={this.nameChange4} />
<button onClick={this.add}
data-a="3" data-b="4" >求和</button>
<button onClick={this.add1.bind(this,3,4)}>求和</button>
<button onClick={()=>{
console.log(this);
}}>求和</button>
</div>
)
}
}

1
2
3
4
5
6
7
8
9
render(){
console.log("render 渲染")
return <button onClick={()=>{
this.setState({
count: this.state.count + 1
})
}}>{this.state.count}</button>
}

1
2
3
4
5
6
7

shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate 控制组件更新")
// 这个函数要求返回bool值, true允许更新,执行render, false禁止更新
return true
}

1
2
3
4
5
6
7
8
9
10
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps")
// 这个钩子函数必须要有return, 返回值可以是null或对象
// return null
// 如果返回的是对象, 返回的对象数据会更新到state状态中
return {
count: 100
}
}

1
2
3
4
5
6
7
8
9
10
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate")
// 这个钩子函数也要求必须有返回值
// return null
// 这个函数的返回值会传入 componentDidUpdate 函数的第三个参数中
return {
name: "张三"
}
}

1
2
3
4
5

componentDidUpdate(prevProps, prevState, data) {
console.log("componentDidUpdate 已经更新", data)
}

1
2
3
4
5
6
7
8
9

<MyCom1 name="张三"/>
function
MyCom1(props) {
// 函数式组件通过函数的参数props接收父组件通过属性传入的数据
console.log(props)
return <div>组件1-{props.name}</div>
}

1
2
3
4
5
6
7
8
9

ReactDOM.render(
<div>
<MyCom1 name="张三"/>
<MyCom2 age="20"/>
</div>,
document.getElementById('example')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class MyCom2 extends React.Component{
constructor(props) {
super(props);
//类组件通过构造器的参数props接收父组件通过属性传入的数据
console.log(props)
// props.age = 30
props是只读的,不能改
this.state = {sex: "男"}
}
render() {
// 类组件中的props数据在模板中使用this打点调用
return <div>组件2-{this.props.age}-{this.state.sex}</div>
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function MyCom1(props) {
console.log(props)
return <div>组件1-{props.children}</div>
}
class MyCom2 extends React.Component{
constructor(props) {
super(props);
console.log(props)
}
render() {
return (
<div>组件2-{this.props.children}</div>
)
}
}
ReactDOM.render(
<div>
<MyCom1></MyCom1>
<MyCom1>插槽数据</MyCom1>
<MyCom1>{[1,2,3,4]}</MyCom1>
<MyCom2><a href="#">百度</a></MyCom2>
<MyCom2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</MyCom2>
<MyCom2>
<li>1</li>
<li>2</li>
<li>3</li>
</MyCom2>
</div>,
document.getElementById('example')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 class ChildCom extends React.Component{
add = ()=>{
// this.$emit("event", this.props.numer + 1)
vue

// this.triggerEvent("event", this.props.numer + 1)
小程序
console.log(this.props)
// react中子传父原理: 在父组件中定义更新函数,把函数传入子组件, 在子组件中调用更新函数, 通过参数把子组件数据传入父组件
this.props.myChange(this.props.number + 1, this.props.i)
}
render() {
return (
<div>
子组件: <button onClick={this.add}>{this.props.number}++</button>
</div>
)
}
}
// 定义父组件
class FatherCom extends React.Component{
state = {
fatherList: [1,5,4,7]
}
changeNumber = (value, index)=>{
console.log(value, index)
this.state.fatherList[index] = value
this.setState({
fatherList: this.state.fatherList
})
}
render() {
return (
<div>
{
this.state.fatherList.map((item,index)=>{
return <ChildCom number={item} i={index} key={index} myChange={this.changeNumber}/>
})
}
</div>
)
}
}
ReactDOM.render(
<div> <FatherCom/> </div>,
document.getElementById('example')
)