开始使用 React.js 后，props 似乎是静态的（从父组件传入），而 state 根据事件发生变化。但是，我注意到文档中提到了componentWillReceiveProps，其中特别包括了这个例子：
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
这似乎意味着可以根据nextProps 与this.props 的比较来更改组件的属性。我错过了什么？ props 是如何变化的，还是我弄错了它的调用位置？
【问题讨论】：
标签： javascript reactjs properties
一个组件不能更新它自己的 props，除非它们是数组或对象（让一个组件更新它自己的 props，即使可能是一种反模式），但是可以更新它的 state 和它的孩子的 props。
例如，Dashboard 在其状态中有一个speed 字段，并将其传递给显示此速度的 Gauge 子项。它的render 方法就是return <Gauge speed={this.state.speed} />。当仪表板调用this.setState({speed: this.state.speed + 1}) 时，仪表会使用speed 的新值重新渲染。
就在这发生之前，调用 Gauge 的 componentWillReceiveProps，以便 Gauge 有机会将新值与旧值进行比较。
【讨论】：
componentWillReceiveProps 现在已经过时了：取而代之的是getDerivedStateFromProps 和componentDidUpdate 的组合。
道具
一个 React 组件应该使用 props 来存储可以被 已更改，但只能由不同的组件更改。
状态
React 组件应该使用状态来存储 组件本身可以改变。
Valéry 已经提供了一个很好的例子。
【讨论】：
当组件的父级使用不同的属性再次渲染组件时，道具可能会发生变化。我认为这主要是一种优化，因此不需要实例化新组件。
【讨论】：
钩子发生了很大变化，例如componentWillReceiveProps 变成了useEffect+useRef (as shown in this other SO answer)，但是Props are still Read-Only，所以只有调用者方法应该更新它。
【讨论】：
如果道具是数组，则更新道具的技巧：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: this.props.count
}
}
increment(){
console.log("this.props.count");
console.log(this.props.count);
let count = this.state.count
count.push("new element");
this.setState({ count: count})
}
render() {
return (
<View style={styles.container}>
<Text>{ this.state.count.length }</Text>
<Button
onPress={this.increment.bind(this)}
title={ "Increase" }
/>
</View>
);
}
}
Counter.defaultProps = {
count: []
}
export default Counter
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
【讨论】：
如果您使用recompose，请使用mapProps 来制作从传入道具派生的新道具
例子：
import { compose, mapProps } from 'recompose';
const SomeComponent = ({ url, onComplete }) => (
{url ? (
<View />
) : null}
)
export default compose(
mapProps(({ url, storeUrl, history, ...props }) => ({
...props,
onClose: () => {
history.goBack();
},
url: url || storeUrl,
})),
)(SomeComponent);
【讨论】：