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

如果只想在 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 (
      <>
        
      
    );
  }
}

改进

直接复制 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 (
      <>
        
        

          默认值
        
      
    );
  }
}