请教context函数组件里箭头函数这里的用法

Question

请教双越老师

function ThemeLink (props) {
    // const theme = this.context // 会报错。函数式组件没有实例，即没有 this

    // 函数式组件可以使用 Consumer
    return <ThemeContext.Consumer>
        { value => <p>link's theme is {value}</p> }
    </ThemeContext.Consumer>
}

这里这个

 { value => <p>link's theme is {value}</p> }

我没弄明白，感觉结果上看这里是执行了函数是返回了这个p节点吧？但感觉箭头函数比如

var fn = x => x * x;

这个fn还是一个函数吧？因为x => x * x这部分是个函数，把这个函数赋值给fn 那么

value => <p>link's theme is {value}</p>

这一部分感觉其实也是一个函数并没有执行？
所以这个花括号里感觉就像是{fn}而不是{fn()}的感觉？可那又怎么会返回这个p节点呢？
谢谢老师！

Answer 1

双越 2021-02-27 16:26:21

你也说了，这里是一个 {fn} 而不是 {fn()} ，即这里只定义函数而不执行。

什么时候执行，什么时候返回 p 节点。组件渲染的时候，就执行这个函数。

PS：其实，不光这里，整个 JSX 编译了之后，也就是一个函数。组件渲染时，执行函数。

• 提问者 慕无忌0473372 #1

  谢谢双越老师！那这里这个{fn}在函数组件return渲染的时候会自动执行？就是感觉以前其他地方比如function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }感觉{}里感觉是直接放的值？所以{}里放值或者函数都可以？如果是函数会外面那个大return <ThemeContext.Consumer>后自动执行？ 谢谢老师！

• 双越 回复 提问者 慕无忌0473372 #2

  不是自动执行，只组件渲染的时候执行。

• 提问者 慕无忌0473372 #3

  非常感谢！