react小书没读完的记录

本文详细介绍了React组件的生命周期方法,包括构造函数、挂载阶段的方法如componentWillMount和componentDidMount,更新阶段的方法如shouldComponentUpdate、componentWillUpdate和componentDidUpdate,以及卸载阶段的方法componentWillUnmount。此外还涉及了props和state的使用方式、事件处理机制以及一些最佳实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

react的生命周期
constructor() 一般来说 所有关于组建自身的状态的初始化工作都会放在 constructor里面去做

componentWillMount:组件挂在开始之前,也就是在组件调用render方法之前调用 进行组件的启动工作

例如Ajax数据拉取 定时器的启动 组件从页面上销毁的时候

componentDidMount:组件挂载完成以后,也就是DOM元素已经插入页面后调用

componentWillUnmount:组件对应的DOM元素从页面中删除之前调用 有时候需要一些组件的清理 例如定时器的清理

shouldComponentUpdate(nextProps,nextState) 可以通过这个方法控制组件是否重新渲染,如果返回false组件就不会重新渲染

componentWillReceiveProps(nextProps) 组件从父组件接受到的新的props之前调用

componentWillUpdate() 组件开始重新渲染之前调用

componentDidUpdate() 组件重新渲染并且把更改变为真是的DOM之后调用

react on*事件监听只能用于普通的HTML标签上面不能用在组件标签上面

react 的事件监听方法需要手动bind到当前实例 这种模式在react中非常常用

如果有多个setState对同一个属性进行操作比如累加 后面的不能及时接收到前面的

更改过后的state的值 这个时候应该在setstate里面接收一个函数来实现数据的及时变化

props可以通过在父组件的子组件标签上面传递对象 函数 来传给子组件 子组件可以通过this.props

的方式来获取到父组件传递过来的参数 也可以通过给组件添加类属性defaultProps来配置默认参数

props一旦传入就不可以在组件内部对他进行修改 但是可以通过父组件主动重新渲染的方式(setstate)来传入新的props

从而达到更新的效果

ref属性是一个函数 例如:<input ref={(input) => this.input = input} /> 这就是给input起了个input的名字 然后穿进去赋值给this.input 然后

this.input 就代表这个input DOM节点了 能不用ref尽量不用ref

state是让组件控制自己的状态 props是让外部对组件进行配置 尽量少用state 多用props 没有state的组件叫做无状态组件

设置了state的组件叫有状态组件 因为状态会带来管理的复杂性(个人理解就是不好被复用)所以应该尽量少写有状态的组件

react中必须要用setState才能更新组件的内容,所以要想在react中实现类似Vue中的输入框双向绑定就需要监听输入框的onchange

事件 然后获取到用户输入的内容在通过setState的方式更新state中的跟输入框绑定的值这样输入框的内容才会更新

类似于 这些元素的value值被react所控制 渲染的组件 在react中都成为受控组件 对于用户可输入的

控件一般都可以让他们成为受控组件 这是react所推崇的做法

dangerouslySetInnerHTML属性就相当于Vue里面的v-html react里面的style接收一个对象里面的带有-的属性要把-省略同时把-后面的字母大写

通过propTypes给组建的参数做类型限制 可以帮助我们迅速定位错误 这在构建大型应用程序特别有用

高阶组件就是一个函数 传给他一个组件 它返回一个新的组件 这个新的组件会使用你传给他的组件作为子组件

子组件里面公用父组件的props属性 这就是单向数据流 当某个状态被多个组件依赖或者影响的时候就该把状态提升到这些组件的最近的

公共父组件中去管理,用props传递数据或者函数来管理这种依赖或者影响的行为 但是如果一个组件的状态是跟他上面祖先的状态有联系的话

那么就得提升到祖先的那一级去 这样不利于代码维护 所以就有了Redux的诞生

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值