详解React中传入组件的props改变时更新组件的几种实现方法 - CSDN文库

5星 · 超过95%的资源 25 浏览量更新于2023-03-16 收藏 75KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

详解详解React中传入组件的中传入组件的props改变时更新组件的几种实现方法改变时更新组件的几种实现方法

主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法，小编觉得挺不错的，现在分享给大

家，也给大家做个参考。一起跟随小编过来看看吧

我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将

新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了

一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还

是getDerivedStateFromProps都不是那么优雅，而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。

何时使用派生状态何时使用派生状态

咱们先来看一个比较常见的需求，一个用户列表，可以新增和编辑用户，当用户点击‘新建'

按钮用户可以在输入框中输入新的用户名；当点击‘编辑'按钮的时候，输入框中显示被编辑的用户名，用户可以修改；当用户

点击‘确定'按钮的时候用户列表更新。

class UserInput extends React.Component {

state = {

user: this.props.user

}

handleChange = (e) => {

this.setState({

user: {

...this.state.user,

name: e.target.value

}

});

}

render() {

const { onConfirm } = this.props;

const { user } = this.state;

return (

<div>

<input value={user.name || ''} onChange={this.handleChange} />

<button onClick={() => { onConfirm(user) }}>确定</button>

</div>

);

}

}

class App extends React.Component {

state = {

users: [

{ id: 0, name: 'bruce' },

{ id: 1, name: 'frank' },

{ id: 2, name: 'tony' }

],

targetUser: {}

}

onConfirm = (user) => {

const { users } = this.state;

const target = users.find(u => u.id === user.id);

if (target) {

this.setState({

users: [

...users.slice(0, users.indexOf(target)),

user,

...users.slice(users.indexOf(target) + 1)

]

});

} else {

const id = Math.max(...(users.map(u => u.id))) + 1;

this.setState({

users: [

...users,

{

...user,

id

}

]

});

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

抹蜜茶

粉丝: 303
资源: 937

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈