React笔记(三)
前言
eg:代表代码对照 若文章有误,欢迎读者留言反馈组件传值
组件的嵌套
组件的嵌套,直接引入组件,然后直接当作自定义标签占位符使用【不需要注册】props传值
组件间传值,在React中是通过只读属性props
来完成数据传递的。
props:接受任意的入参,并返回用于描述页面展示内容的 React
元素。
函数组件
函数组件可以通过props直接获取父组件传递的值【没有this,注意得把props传递进去,才能使用props】
1
2
3
4
5
6
7
8
9
10
11
12{ /* 父组件 */ }
<Child2 hobby={'aaaa'}/>
{ /* 子组件 */ }
const Child2 = (props) => {
// 函数组件可以通过props直接获取父组件传递的值【没有this,注意得把props传递进去,才能使用props】
return (
<div>
爱好-{props.hobby}
</div>
)
}类组件
类组件,可以通过this.props.num 直接获取父组件传递过来的值
只读,单向数据流,父组件更新,子组件也随之更新
只要props中有数据,必定是父组件传递的值,vue react vue3同理
注意点:里面不能随便写计时器等其它内容,按照类的写法去写1
2
3
4
5
6
7
8{ /* 父组件 */ }
<Child name="小明" age={22}/>
{ /* 子组件 */ }
<div>
姓名:{this.props.name}<br/>年龄:{this.props.age}
</div>
事件【分函数组件、类组件】
事件对象
react事件对象叫混合事件对象,全称SyntheticBaseEvent,是react为了提高性能所封装。
原生事件对象具有的功能,混合事件对象也具有。
为什么react要封装事件对象?
- 为了更好的跨平台和兼容性,react中的event没有兼容性问题。
- 为了统一管理所有的事件,所有的事件都是直接绑定在document上的。提高性能。避免频繁解绑。
- 方便统一管理,(事务机制)
eg1:
1 | import React, { Component } from 'react' |
点击事件
函数组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 // 函数组件
import React from 'react'
const ClickDemo = () => {
var handleClick = () => {
console.log('点击了1')
}
var handleClickA = (val) => {
console.log('点击了2', val)
}
return (
<div>
<h3>函数组件点击事件</h3>
{/* 不传递参数 */}
<button onClick={handleClick}>点击1</button>
{/* 传递参数,需要回调 */}
<button onClick={() => handleClickA('bbb')}>点击2</button>
</div>
)
}
export default ClickDemo类组件
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 // 类组件
import React, { Component } from 'react'
class ClickDemo extends Component {
// 类组件里面方法的三种不同写法
handleClick() {
console.log('点击了1')
}
handleClickA = () => {
console.log('点击了2')
}
handleClickB = (val) => {
console.log('点击了3', val)
}
render() {
return (
<div>
<h3>类组件点击事件</h3>
{/* 不传递参数 */}
<button onClick={this.handleClick}>点击1</button>
<button onClick={this.handleClickA}>点击2</button>
{/* 传递参数,需要回调 */}
<button onClick={() => this.handleClickB('aaa')}>点击3</button>
</div>
)
}
}
export default ClickDemo