react-native - 인자를 함수로 호출하기

Question

나는이 질문에 자바 스크립트 및/또는 특히 React-Native보다 ESO6가 더 많이 포함될 수 있다는 의심의 여지가 있지만 시도하겠습니다. 다음과 같은 구성 요소가 있습니다 :

export default class Body extends Component { 

    componentWillMount() { 
    this.refresh(); 
    } 

    clickme() { 
    console.log('I have been pressed!!!!!'); 
    } 

    refresh() { 
    this.props.populateGrid(); 
    } 
    render() { 
    return (
     <View style={styles.body}> 
     <Grid inGrid={this.props.grid} /> 
     <Button 
      onPress={this.clickme} 
      title={'PressMe'} 
     /> 
     </View> 
    ); 
    } 

} 

먼저 'this.clickme()'를 onPress에 전달했습니다. 그것은 작동하지 않았다. 그것은 작업을 시작한 중괄호를 제거한 후에였습니다. 왜? 우리는 보통()을 포함한 함수를 호출하지 않습니까? 또한 때로는 다음과 같은 형식으로 전달해야합니다. something = {() => this.clickme()}. 왜/언제?

1. {this.clickme} 
2. {this.clickme()} 
3. {() => this.clickme()} 

감사합니다 : 할 때와 같이

그래서 우리는 함수를 호출합니다.

Answer 1

짧은 대답은 :

1과 3이 질문에 정의로 효과적으로 Button.onPress에 대해 동일합니다 - 그들은 몸을 기능에 대한 참조를 전달한다. 그러나 # 3은 매우 가벼운 방법으로 정의되었지만 새로운 함수를 인라인으로 정의하고 있습니다. # 2가 함수를 인라인으로 호출하려고합니다. Button.onPress가 요구하는 것처럼 콜백 함수가 아닌 숫자 나 부울 또는 문자열 값을 속성에 전달해야하는 경우 (# 2)이 작업을 수행하는 것이 좋습니다.

긴 대답 :

는 반응 구성 요소에 데이터를 전달하는 방법의 서명에 의해 정의된다 필요한 구문. 이 경우 우리는 Button.onPress에 대해 말하고 있습니다.이 버튼은 콜백 함수를 사용하고 호출 할 때 어떤 인수도 전달하지 않음을 의미하는 () => {}이라는 서명이 있습니다. 구성 요소를 정의 할 때 사용자가 클릭하지 않기 때문에 함수를 즉시 호출하지 않으려 고합니다. 그들은 나중에 임의의 시간을 클릭하고 있습니다.

결과가 아닌 함수를 전달해야하므로 함수 이름 끝에()를 포함하지 않으려합니다. 괄호를 사용하면 함수가 즉시 실행되지만 이름만으로는 함수 본문에 대한 참조가 전달됩니다. 이 참조는 나중에 Button.onPress에 의해 호출되어 사용자 상호 작용을 처리합니다.

많은 JavaScript (및 React)는 함수 참조를 전달하고 나중에 다른 함수 내에서 해당 함수를 호출하는 패턴으로 작성됩니다. 그 패턴에 익숙하지 않다면 확실히 콜백 패턴에 대해 읽는 시간을 보내십시오.

() => {} 또한 인라인 익명 기능을 정의하는 간단한 방법입니다. 그것은 화살표 함수라고 불리며, 별도의 함수 본문을 정의하는 것보다 약간의 성능 향상을 가져올 수 있습니다. 여기

상세 정보 :

• () => {} (arrow function) documentation on MDN
• Callback documentation on MDN