React에서이 두 ES6 화살표 함수의 차이점은 무엇입니까?

버튼을 클릭하면 handleClick이 호출되어 버튼 값이 0에서 1 씩 증가합니다. 두 가지 시나리오에서 handleClick 코드를 작동 시켰습니다. 나는 첫번째 것을 이해한다, 나는 두 번째 것을 이해하지 못하는 것 같다.React에서이 두 ES6 화살표 함수의 차이점은 무엇입니까?

나는 이것을 작성했습니다. 그리고 그것은 작동합니다.

handleClick =() => { 
    this.setState({count: this.state.count + 1}) 
    }

튜토리얼이 하나를 보여주고 너무 작동합니다. 나는이에 코드를 변경하는 경우

handleClick =() => { 
    this.setState(({count}) => ({ 
     count: count + 1 
    })) 
    }

이 너무 작동합니다.

handleClick =() => { 
    this.setState(() => ({ 
     count: this.state.count + 1 
    })) 
    }

이 같은 일을하지만 첫 번째보다 더 복잡 할 때 코드의 제 2 몸체를 사용의 장점은 무엇입니까?

기본적으로 첫 번째 코드 본문에서 생성하는 대신 리터럴을 반환한다는 것을 알고 있습니다. 그런데 왜 내가 매개 변수를 비울 수 있고 몸에 this.state.count을 사용할 수있을 때 매개 변수로 {count}을 전달합니까?

출처

2017-12-21 MiniGunnR

https://stackoverflow.com/questions/37661166/what-do-function-parameter-lists-inside-of-curly-braces-do-in-es6 – epascarello

@epascarello 감사합니다. 상태가 함수에 자동으로 전달됩니까? 왜냐하면 만약 내가 올바르게 이해한다면, 내가 파기하지 않으면 그 물체를 함수에 전달해야하기 때문입니다. 하지만'this.state.count'에서 count에 접근 할 때 매개 변수를 전달하지 않습니다. – MiniGunnR

React에서는 this.setState()가 변경 사항을 대기열에 넣습니다. 바로 지금 당장 일어나는 것은 아닙니다. 따라서 this.state.count의 값은 setState이 실제로 변경 될 때까지 변경되었을 수 있습니다.

두 번째 버전에서는 this.setState()에 함수를 전달합니다. React가 상태를 변경할 준비가되면 현재 상태를 인수로 사용하여 해당 함수가 호출됩니다. 이렇게하면 상태가 올바르게 증가하도록 할 수 있습니다.

The React documentation이 더 자세히 설명됩니다.

출처

2017-12-21 17:49:53 Sidney

React에서이 두 ES6 화살표 함수의 차이점은 무엇입니까?

답변

관련 문제