상태 변경에 반응하는 방법은 무엇입니까?

React에서 상태를 변경하는 방법은 다음과 같습니다. 1. "this.setState({title:'React'});" 메소드를 통해 상태를 수정합니다. 2. "this.setState((preState, props)=>counter를 통해; :preState .Quantity+1)" 메소드를 통해 상태를 수정합니다. 3. "replaceState" 메소드를 통해 컴포넌트의 상태를 변경합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React에서 상태를 변경하는 방법은 무엇인가요?

React에서 상태를 올바르게 수정합니다

첫 번째, React에서는 this.state를 통해 직접 상태를 얻을 수 있습니다.{property} , 그러나 상태를 수정하려고 할 때 주의해야 할 함정이 많습니다. 다음은 세 가지 일반적인 함정입니다.

상태를 직접 수정할 수 없습니다.

구성 요소는 상태를 직접 수정하며 렌더링을 다시 트리거하지 않습니다. 예:

this.state.title='React';

올바른 수정 방법은 다음과 같습니다.

this.setState({title:'React'});

state update is asynchronous

setState가 호출되면 구성 요소 상태가 즉시 변경되지 않지만 수정될 상태가 이벤트 대기열에 들어가고 React는 실제 실행 타이밍을 최적화하며 자체 성능상의 이유로 여러 setState 상태 수정이 하나의 상태 수정으로 병합될 수 있습니다. 따라서 다음 상태를 계산하기 위해 현재 상태에 의존하지 마십시오. 상태 수정이 실제로 수행될 때 때로는 종속 this.state가 최신 상태라고 보장되지 않기 때문입니다. 왜냐하면 반응 자체가 여러 상태를 하나로 병합한 다음, 그런 다음 상태는 여전히 이전 상태이므로 prop 업데이트도 비동기식이므로 현재 prop에 의존하여 다음 상태를 계산할 수 없습니다. 예를 들어 일반적으로 사용되는 반응의 예에서는 더하기 기호를 클릭하면 값이 1 증가하는 동작이 있습니다. +를 한 번 클릭하면 숫자가 1 증가합니다. 연속으로 두 번 클릭하면 숫자가 1 증가합니다. 여전히 1씩 증가합니다. 이는 React를 merge하고nce.로 수정한 경우이며, 이는 다음 코드를 실행하는 것과 같습니다.

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

그러면 이전 작업을 덮어쓰고 최종 값은 1만 증가합니다. setState 매개변수로 다른 함수를 사용할 수 있습니다. 이 함수에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 수정 전 구성요소의 상태입니다.

수정하는 올바른 방법은 다음과 같습니다.

this.setState((preState, props)=>counter:preState.quantity+1)

상태 업데이트는 병합 프로세스입니다

구성 요소의 상태를 수정하기 위해 ssetState를 호출할 때 전체 상태가 아닌 변경된 상태만 전달하면 됩니다. 구성 요소 상태 업데이트는 병합 프로세스이기 때문입니다. 예를 들어 구성 요소의 상태는 다음과 같습니다.

this.state={

title:'React',

content:'React is an wondeful JS library'

}

참고: 제목만 수정해야 하는 경우 수정된 제목을 setState에 전달합니다.

this.setState({title:'ReactJs'});

react는 최신 항목 병합 제목은 원래 상태로 반환되고 원래 상태의 내용은 유지됩니다. 최종 병합 상태는 다음과 같습니다.

this.state={
title:'ReactJs,
content:''React is an wondeful Js library
}

두 번째, 상태 및 불변 객체

React는 공식적으로 상태를 불변 객체로 취급합니다. 한편으로는 this.state 및 구성 요소를 직접 수정합니다. 반면에 상태에 포함된 모든 상태는 변경 불가능한 객체여야 합니다. 원래 상태를 직접 수정하는 대신 다시 생성하면 상태가 변경되면 어떻게 새 상태를 생성할 수 있나요? 상태 유형에 따라 다음 세 가지 상황으로 나눌 수 있습니다.

상태 유형은 다음과 같습니다. 불변 유형(숫자, 문자열, 부울, 불, 정의되지 않음)

이 상황은 가장 간단합니다. 상태는 불변 유형이므로 수정할 상태에 직접 새 값을 할당할 수 있습니다. 아래와 같이 수정하려는 개수는 숫자 유형, 제목(문자열), 성공(bool)입니다. 세 가지 상태:

this.setState({
count:1,
title:'React',
success:true
})

상태 유형은 배열입니다.

배열 유형 상태 책이 있는 경우 책에 책을 추가하려면 배열의 concat 방법이나 es6 확장 구문(apread 구문)을 사용할 수 있습니다

방법 1: preState, concat을 사용하여 새 배열 만들기

 this.setState((preState)=>books:preState.books.concat(['React Guide']))

방법 2: ES6 스프레드 구문

this.setState(preState=>books:[...preState,''React Guide])

책의 일부 요소를 새 상태로 가로챌 때 배열의 슬라이스 방법을 사용할 수 있습니다.

this.setState(preState=>books:preState.books.slice(1,3))

책의 일부 요소를 새 상태로 필터링한 후, 필터 메소드를 사용할 수 있습니다:

 this.setState(preState => {
        books: preState.books.filter(item => {

        return item != 'React';

        })
    })

참고: push, pop, Shift를 사용하지 마세요. unshift 및 splice 메소드는 배열 유형의 상태를 수정합니다. 왜냐하면 이러한 메소드는 원래 배열을 수정하는 반면 concat, Slice, 필터는 새로운 배열을 반환합니다.

방법 3: 상태 유형이 일반 객체입니다(제외: 문자열, 배열)

es6의 Object.assgin() 메소드 사용

this.setState({

onwer:Object.assgin({},preState.onwer,{name:'Jason'});

})

객체 확산 속성 사용:

this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})

 

总结：

创建新的状态的关键是，避免使用会直接修改原对象的方法而是使用可以返回一个新对象的方法，当然可以使用Immutable的JS库（Immutable.js）实现类似的效果。

 

思考：

为什么React推荐组件状态的修改时不可变对象呢？

1. 不可变对象的修改会返回一个新的对象，不用担心原对象在不小心的情况下修改导致的错误，方便程序的管理和调试
2. 处于性能的考虑，对象组件的状态是不可变对象时，在组件的shouldComponentUpdate方法中仅需要比较前后两次状态对象的引用就可以判断状态是否真的改变，从而避免不必要的render调用

三：除了以上方法修改react组件的状态之外，我们还经常会用到replaceState改变组件的状态

 

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。使用语法：

replaceState(object nextState,[, function callback])

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

如：

 class App extends React.Component{

     constructor(props);

      this.state={

      count:1

      title:'数字计算'

      }

}

handleClick=()=>{

  this.replaceState({

    count:this.state.count+1

  })

}

render(){
    return(
      <button>点我</button>
      )
  }

}

 

结果为：

 

{
count：1
}

推荐学习：《react视频教程》

위 내용은 상태 변경에 반응하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!