如果只想在 state 更改時重新計算某些數(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 更改時“重置”某些 state互纯，比如隨機(jī)默認(rèn)值案例
在這里插入圖片描述
vue
Vue提供了一種更通用的方式來觀察和響應(yīng)Vue實例上的數(shù)據(jù)變動：偵聽屬性 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 會在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時都會被調(diào)用宁仔。它應(yīng)返回一個對象來更新 state稠屠，如果返回 null 則不更新任何內(nèi)容。
父組件重新渲染時觸發(fā)翎苫，請注意权埠，不管原因是什么，都會在每次渲染前觸發(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 是一個非常糟糕的想法攘蔽。這兩者的關(guān)鍵在于，任何數(shù)據(jù)呐粘，都要保證只有一個數(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>
</>
);
}
}
