vue和react中props变化后修改state的方式 vue和react中props变化后修改sta

如果只想在 state 更改时重新计算某些数据，比如搜索框案例。

文章图片
在这里插入图片描述
vue

react

import React, { PureComponent } from 'react'; class Example extends PureComponent { state = { filterText: '' }; handleChange = event => { this.setState({ filterText: event.target.value }) } render() { const filteredList = this.filter(this.props.list, this.state.filterText) return ( <> { filteredList.map( item => {item.text} ) } ); } }

如果你想在 prop 更改时“重置”某些 state，比如随机默认值案例

文章图片
在这里插入图片描述
vue Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性 watch。

react React生命周期 getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
父组件重新渲染时触发，请注意，不管原因是什么，都会在每次渲染前触发此方法。

class Example extends Component { state = { text: '' }; handleChange = (event) => { this.setState({ text: event.target.value }) } static getDerivedStateFromProps(nextProps, prevState) { if (prevState.email !== nextProps.email) { return { text: nextProps.email, email: nextProps.email } } return {text: prevState.text} } render() { return ( <> ); } }

改进 【vue和react中props变化后修改state的方式】直接复制 prop 到 state 是一个非常糟糕的想法。这两者的关键在于，任何数据，都要保证只有一个数据来源，而且避免直接复制它。
vue

react

function Example (props) { return ; }

class App extends React.Component { state = { email: '' } handleClick = () => { this.setState({ email: String(Math.random()) }) } handleChange = (event) => { this.setState({ email: event.target.value }) } render() { return ( <> ); } }