respect.js의 상태 변화를 듣는 방법

respect.js의 상태 변화를 듣는 방법

React.js에서 각도의 $watch 함수는 무엇입니까?

상태 변화를 듣고 getSearchResults()와 같은 함수를 호출합니다.

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

상태가 변경되면 다음 라이프 사이클 메서드가 호출됩니다.제공된 인수와 현재 상태를 사용하여 의미 있는 변경 여부를 확인할 수 있습니다.

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

2020년에는 이와 같은 useEffect 훅으로 상태 변화를 들을 수 있습니다.

export function MyComponent(props) {
    const [myState, setMystate] = useState('initialState')

    useEffect(() => {
        console.log(myState, '- Has changed')
    },[myState]) // <-- here put the parameter to listen
}

저는 Angular를 사용하지 않았습니다만, 위의 링크를 보면, 당신은 처리할 필요가 없는 것을 코드화하려고 하고 있는 것 같습니다.이를 통해 React 구성 요소 계층에서 상태를 변경합니다.setState() 및 React는 컴포넌트를 다시 렌더링합니다(실제로 변경을 '리슨'합니다).계층의 다른 구성 요소에서 '수신'하려면 다음 두 가지 옵션을 사용할 수 있습니다.

1. 공통의 부모로부터 핸들러를 전달해, 부모 상태를 갱신하도록 해, 부모 아래의 계층이 재렌더 됩니다.
2. 또, 계층에 캐스케이드 하는 핸들러의 급증을 피하기 위해서, 상태를 데이터 스토어로 이동시켜 컴포넌트가 변경을 감시할 수 있는 플럭스 패턴을 조사할 필요가 있습니다.Fluxor 플러그인은 이를 관리하는 데 매우 유용합니다.

2019년에 useState 및 useEffect Hooks를 사용한 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)} />

컴포넌트 라이프 사이클 아래에 컴포넌트 갱신을 실행할 필요가 있는 입력 속성이 있는 것처럼 사용해야 합니다.컴포넌트 갱신을 뷰에 반영하기 전에 호출되는 대로 컴포넌트 갱신을 실행할 수 있는 최적의 장소입니다.

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

const [ name , setName ]= useState(' ' )와 같은 후크를 사용하는 경우 다음을 시도할 수 있습니다.

 useEffect(() => {
      console.log('Listening: ', name);
    }, [name]);

위에서 설명한 바와 같이 useEffect와 함께 useState를 사용하는 것이 절대적으로 올바른 방법입니다.단, getSearchResults 함수가 서브스크립션을 반환하는 경우 useEffect는 서브스크립션 등록을 취소하는 함수를 반환해야 합니다.useEffect에서 반환된 함수는 의존관계(위 케이스의 이름)로 변경될 때마다 실행됩니다.

시간이 좀 지났지만 나중에 참조하기 위해 메서드 component Update()를 사용할 수 있습니다.

업데이트는 소품 또는 상태 변경으로 인해 발생할 수 있습니다.이러한 메서드는 컴포넌트가 재렌더될 때 다음 순서로 호출됩니다.

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

참조: https://reactjs.org/docs/react-component.html

이 코드를 사용하여 종속성 중 어떤 것이 변경되는지 확인합니다. 순정보다 .useEffect많은 경우.

// useWatch.js
import { useEffect, useMemo, useRef } from 'react';

export function useWatchStateChange(callback, dependencies) {
    const initialRefVal = useMemo(() => dependencies.map(() => null), []);
    const refs = useRef(initialRefVal);
    useEffect(() => {
        for(let [index, dep] of dependencies.entries()) {
            dep = typeof(dep) === 'object' ? JSON.stringify(dep) : dep;
            const ref = refs.current[index];
            if(ref !== dep) {
                callback(index, ref, dep);
                refs.current[index] = dep;
            }
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, dependencies);
}

리액트 컴포넌트에서는

// App.js
import { useWatchStateChange } from 'useWatch';
...
useWatchStateChange((depIndex, prevVal, currentVal) => {
  if(depIndex !== 1) { return } // only focus on dep2 changes
  doSomething("dep2 now changes", dep1+dep2+dep3);
}, [ dep1, dep2, dep3 ]);

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