【React】学习之组件及生命钩子函数


React组件

用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) react有两种组件
  • 函数式组件
  • class类名组件

组件各自的写法

函数式组件

let Com=()=>(
             <div>
                 <span>aaaaaaaaa</span>
             </div>
            );

class类名组件

class Com extends React.Component{
                render(){
                    return (
                        <div>
                            <span>aaaaaaaa</span>
                        </div>
                    )
                }
            }

使用方式

<Com></Com> 或者 <Com/>

组件的注意事项、区别

1、组件的首字母大写
2、组件使用的时候、如果没有内容可以使用单标签

                           生命周期      	状态state     	 	this             属性
                           
    函数组件               基础的没有     		基础的内有      	注意可能会乱    		  有

    class组件的区别         有的           	 有           		实例              有

之前函数式组件一般用在做大的组件的结构,或者式用来布局的,写样子的。
之前基本上大部分用的是class组件

但是新版本hock给函数组件加了东西,现在用函数式组件的比较多


组件的属性

定义属性


    <Com tit="我是函数式组件" name="组件1"/>
       

函数式
props props.xxxx
class类式
this.props.xxx

  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中
  3. 通过标签属性从组件外向组件内传递变化的数据
  4. 注意: 组件内部不要修改props数据
  5. 属性是只读的,不能修改

组件的状态state

  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

  2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

  3. 状态数据,不能直接修改或更新

  4. 组件中render方法中的this为组件实例对象

calss Com extends React.Component{
	constructor(){
        super();

        this.state={
            n:1
        }
    }
}

组件中事件的使用

组件自定义的方法中this为undefined,如何解决?
a) 绑定this: 通过函数对象的bind()
b) 箭头函数

	onClick={this.show}

    this有问题
        1、this.show.bind(this)
        2、show=()=>{}

    传参
       this.show.bind(this,xxx,xxx)
    事件对象
       this.show.bind(this,xxx,ev)

组件的生命周期钩子函数

class名式

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
		1.	constructor()
		2.	getDerivedStateFromProps 
		3.	render()
		4.	componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
		1.	getDerivedStateFromProps
		2.	shouldComponentUpdate()
		3.	render()
		4.	getSnapshotBeforeUpdate
		5.	componentDidUpdate()
3. 销毁组件: 由ReactDOM.unmountComponentAtNode()触发
		1.	componentWillUnmount()

  1. componentDidMount:开启监听, 发送ajax请求
  2. componentWillUnmount:例如: 清理定时器这样的收尾工作
    即将废除的钩子
  3. componentWillMount
  4. componentWillReceiveProps
  5. componentWillUpdate

hook

useEffect

//相当于合并componentDidMount 组件挂载 和 componentDidUpdate 组件更新

return在组件销毁的时候也会更新

useEffect钩子里面是异步的
每一次运行都是新的函数

useEffect(()=>{
	console.log("effect")
	}
	return ()=>{
	}
)

区别
真实DOM构建以后才会执行
componentDidMountcomponentDidUpdate在DOM构建之前的钩子
componentDidMountcomponentDidUpdate 会阻塞浏览器更新屏幕 而useEffect 不会
DOM构建之前用useLayoutEffect

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值