react.js에서 상태 변경을 듣는 방법은 무엇입니까?

React.js에서 각도의 $ watch 기능 은 무엇입니까 ?

상태 변경을 듣고 getSearchResults ()와 같은 함수를 호출하고 싶습니다.

componentDidMount: function() {
    this.getSearchResults();
}

나는 Angular를 사용하지 않았지만 위의 링크를 읽으면 처리 할 필요가없는 것을 코딩하려고하는 것 같습니다. this.setState ()를 통해 React 컴포넌트 계층에서 상태를 변경하면 React는 컴포넌트를 다시 렌더링하게합니다 (변경 사항을 효과적으로 '듣기'). 계층의 다른 구성 요소에서 '듣기'하려면 두 가지 옵션이 있습니다.

1. 공통 부모에서 (프로펠러를 통해) 핸들러를 전달하고 부모의 상태를 업데이트하여 부모 아래의 계층 구조를 다시 렌더링하도록합니다.
2. 또는 계층 구조를 계단식으로 처리하는 처리기의 폭발을 피하려면 상태를 데이터 저장소로 이동하고 구성 요소가 변경 사항을 감시 할 수 있는 플럭스 패턴 을 확인해야합니다 . Fluxxor 플러그인 이 관리를위한 매우 유용합니다.

상태가 변경되면 다음 수명주기 메소드 가 호출됩니다. 제공된 인수와 현재 상태를 사용하여 의미있는 내용이 변경되었는지 확인할 수 있습니다.

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

업데이트 할 때 구성 요소 업데이트를 트리거 해야하는 입력 속성이있는 것처럼 구성 요소 수명주기 아래에서 사용해야한다고 생각합니다. 렌더링 전에 구성 요소 상태를 업데이트 할 수도 있습니다. 보기에 반영.

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

useState 및 useEffect Hooks를 사용하여 2019 년 React 16.8부터 다음과 같은 기능을 수행합니다 (간단한 경우).

AngularJS :

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

반응 :

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />

위에서 설명한 것처럼 useEffect와 함께 useState를 사용하는 것이 절대적으로 올바른 방법입니다. 그러나 getSearchResults 함수가 subscription을 반환하면 useEffect는 구독을 취소해야하는 함수를 반환해야합니다. useEffect에서 반환 된 함수는 종속성 (위의 경우 이름)과 구성 요소가 삭제 될 때마다 실행됩니다.

오랜 시간이 지났지 만 나중에 참조하기 위해 shouldComponentUpdate () 메소드를 사용할 수 있습니다.

소품 또는 상태 변경으로 인해 업데이트가 발생할 수 있습니다. 이러한 메소드는 구성 요소를 다시 렌더링 할 때 다음 순서로 호출됩니다.

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

심판 : https://reactjs.org/docs/react-component.html