我可以在React.js中更新组件的道具吗？

在开始使用React.js之后，似乎props是静态的（从父组件传入），而state根据事件而变化。 不过，我注意到在文档中引用了componentWillReceiveProps ，具体包括这个例子：

 componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } 

这似乎意味着基于nextProps与this.props的比较，属性可以在组件上改变。 我错过了什么？ 道具是如何改变的，或者我误解了这个被调用的地方？

Answer 1

一个组件不能更新它自己的道具，除非它们是数组或对象（即使可能的话，组件也会更新自己的道具是一个反模式），但是可以更新它的状态和子项道具。

例如，仪表板的状态中有一个speed场，并将其传递给显示该速度的Gauge子。 它的render方法只是return <Gauge speed={this.state.speed} /> 。 当仪表板调用this.setState({speed: this.state.speed + 1}) ，Gauge会重新呈现新的speed值。

就在这之前，Gauge的componentWillReceiveProps被调用，所以Gauge有机会比较新值和旧值。

Answer 2

当组件的父级再次使用不同的属性再次渲染组件时，道具可能会改变。 我认为这主要是一个优化，所以没有新的组件需要实例化。

Answer 3

窍门更新道具，如果他们是arrays：

 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 } } increament(){ 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.increament.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, }, });