2017-02-10 2 views
-1

카레 기능은 컴파일러 (어떤 남자)카레 드 함수는 캐시됩니까?

이 구성 요소는 아래에, 다른 하나는 동일하지만 인라인을한다, 사람은 온 클릭 핸들러를 반환하는 함수를 호출, 두 개의 버튼이 캐시됩니다.

내 지식에 따르면, 둘 다 똑같은 일을하고 있으며, 각 render() 호출에 새로운 기능 () => this.foo()가 생성됩니다. 누군가는 카레 기능 버전이 컴파일러에 의해 캐싱되고 최적화되었으므로 인라인 버전에 비해 이점이 있다고했습니다. 나는 그것과 똑같은 것과 이것을 쓴 사람이 그 표현식으로 인라인 함수를 은폐하고 싶다고 생각한다.

class MyComponent extends Component { 
    foo =() => console.log('fooo') 

    getFunction = callback => { 
    return() => callback(); 
    } 

    render() { 
    return <div> 
     <button onClick={this.getFunction(this.foo)}>curried function</button> 
     <button onClick={() => this.foo()}>inline function</button> 
    </div> 
    } 
} 

나는 인터넷 검색을했는데 성명을 증명할 수는 없었다. 어떻게 생각하니?

+0

내가 뭔가를 누락 될 수 있습니다,하지만 ... 어디 태닝이 여기에? 또한 JavaScript (또는 es6)가 아니므로 [tag : jsx] 태그를 지정할 수도 있습니다. – Amadan

+0

getFunction()에서? – webdeb

+0

위키 피 디아 출신 : "수학과 컴퓨터 과학에서, 커링은 여러 인수 (또는 인수 튜플)를 사용하여 함수의 평가를 각 인수가 하나 인 함수의 순서로 평가하는 기술입니다." 당신의'foo'는 무효 함수입니다. 그래서 저는 여러분이 currying이 어떻게 행해지는지 생각해 볼 수 없습니다. "currying"의 다른 의미를 사용하고 있습니까? – Amadan

답변

1

아니요, 그들은 똑같은 일을하지 않습니다. getFunctionthis 컨텍스트없이 해당 콜백을 호출합니다. 물론, 특정 foo 화살표 기능에 대해서는 전혀 문제가되지 않습니다.

예,이 두 가지 모두 render 호출마다 새 기능을 만듭니다. 각 클로저의 코드는 캐시되지만 함수 오브젝트와 어휘 컨텍스트는 캐시되지 않습니다. 이 문제를 방지하려면

는 생성자에서 한 번만 생성됩니다 (랩퍼없이) foo 기능 자체를 사용

class MyComponent extends Component { 
    constructor(...args) { 
    super(...args); 
    this.foo = (e) => console.log('fooo'); 
    } 
    render() { 
    return <div> 
     <button onClick={this.foo}>cached function</button> 
    </div> 
    } 
}