如果只想在 state 更改時(shí)重新計(jì)算某些數(shù)據(jù)，比如搜索框案例。

在這里插入圖片描述

vue

<template>
  <div>
    <input type="text" v-model="filterText">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      filterText: ''
    }
  },
  computed: {
    filteredList () {
      return this.list.filter(item => item.text.includes(this.filterText))
    }
  }
}
</script>

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 (
      <>
        <input
          type="text"
          onChange={this.handleChange}
          value={this.state.filterText} />
        <ul>
          {
            filteredList.map(
              item => <li key={item.id}>{item.text}</li>
            )
          }
        </ul>
      </>
    );
  }
}

如果你想在 prop 更改時(shí)“重置”某些 state，比如隨機(jī)默認(rèn)值案例

在這里插入圖片描述

vue

Vue提供了一種更通用的方式來觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性 watch。

<template>
  <div>
    <input type="text" v-model="text">
  </div>
</template>

<script>
export default {
  props: {
    email: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      text: ''
    }
  },
  watch: {
    email: {
      immediate: true,
      handler (value) {
        this.text = value
      }
    }
  }
}
</script>

react

React生命周期 getDerivedStateFromProps 會(huì)在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。它應(yīng)返回一個(gè)對(duì)象來更新 state，如果返回 null 則不更新任何內(nèi)容。

父組件重新渲染時(shí)觸發(fā)，請(qǐng)注意，不管原因是什么，都會(huì)在每次渲染前觸發(fā)此方法。

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 (
      <>
        <input
          type="text"
          onChange={this.handleChange}
          value={this.state.text} />
      </>
    );
  }
}

改進(jìn)

直接復(fù)制 prop 到 state 是一個(gè)非常糟糕的想法。這兩者的關(guān)鍵在于，任何數(shù)據(jù)，都要保證只有一個(gè)數(shù)據(jù)來源，而且避免直接復(fù)制它。

vue

<template>
  <div>
    <input type="text" :value="value" @input="handleInput">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

<template>
  <div id="app">
    <Example v-model="email"/>
    <button @click="handleClick">默認(rèn)值</button>
  </div>
</template>

<script>
import Example from './components/Example.vue'

export default {
  components: {
    Example
  },
  data () {
    return {
      email: ''
    }
  },
  methods: {
    handleClick () {
      this.email = String(Math.random())
    }
  }
}
</script>

react

function Example (props) {
  return <input onChange={props.onChange} value={props.email} />;
}

class App extends React.Component {
  state = {
    email: ''
  }
  handleClick = () => {
    this.setState({
      email: String(Math.random())
    })
  }
  handleChange = (event) => {
    this.setState({
      email: event.target.value
    })
  }
  render() {
    return (
      <>
        <Example email={this.state.email} onChange={this.handleChange} />
        <div>
          <button onClick={this.handleClick}>默認(rèn)值</button>
        </div>
      </>
    );
  }
}