React.js에서 컴포넌트의 소품을 업데이트 할 수 있습니까?

React.js로 작업을 시작한 후에 props는 정적 (부모 구성 요소에서 전달됨)으로 의도 된 것처럼 보이지만 state이벤트에 따라 변경됩니다. 그러나 문서에서에 대한 참조를 발견했으며 여기에는 특히이 componentWillReceiveProps예제가 포함되어 있습니다.

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

이것은 속성의 비교에 기반 구성 요소를 변경할 수 있음을 의미하는 것 nextProps까지 this.props. 내가 무엇을 놓치고 있습니까? 소품은 어떻게 변경됩니까, 아니면 이것이 어디에서 호출되는지 잘못 알고 있습니까?

구성 요소는 배열 또는 오브젝트가 아닌 한 자체 소품을 업데이트 할 수 없습니다 (가능한 경우 안티 패턴 인 경우에도 구성 요소가 자체 소품을 업데이트하도록 함). 그러나 상태 및 하위 항목의 소품을 업데이트 할 수 있습니다.

예를 들어, 대시 보드에는 speed해당 상태 의 필드가 있으며이 속도를 표시하는 게이지 자식으로 전달합니다. 그 render방법은 단지 return <Gauge speed={this.state.speed} />입니다. 대시 보드가 호출하면에 this.setState({speed: this.state.speed + 1})대한 새 값으로 게이지가 다시 렌더링됩니다 speed.

이런 일이 발생하기 직전에 게이지 componentWillReceiveProps가 호출되어 게이지가 새로운 값을 이전 값과 비교할 수 있습니다.

소품

React 컴포넌트는 props를 사용하여 변경할 수 있지만 다른 컴포넌트에 의해서만 변경 될 수있는 정보를 저장해야합니다.

상태

React 컴포넌트는 state 자체를 사용하여 컴포넌트 자체가 변경할 수있는 정보를 저장해야합니다.

좋은 예가 이미 Valéry에 의해 제공되었습니다.

구성 요소의 부모가 다른 속성으로 구성 요소를 다시 렌더링하면 소품이 변경 될 수 있습니다. 나는 이것이 새로운 최적화라고 생각하므로 새로운 구성 요소를 인스턴스화 할 필요가 없습니다.

소품이 배열 인 경우 소품을 업데이트하도록 속입니다.

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,
  },
});

후크 (예 : + ( 이 다른 SO 답변에 표시됨) 로 바componentWillReceiveProps turned) 와 함께 많은 부분이 변경 되었지만 Props는 여전히 읽기 전용 이므로 호출자 메소드만이 업데이트해야합니다.useEffectuseRef

를 사용하는 경우 수신 소품에서 파생 된 새 소품을 만드는 데 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);