IT

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

lottoking 2020. 7. 11. 09:19
반응형

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

useStateuseEffect 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)} />

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

소품 또는 상태 변경으로 인해 업데이트가 보관됩니다. 다음 순서로 호출을 호출하는 방법을 다시 호출 할 때.

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

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

참고 URL : https://stackoverflow.com/questions/26402534/how-to-listen-state-changes-in-react-js

반응형