react笔记_05组件

语法

[1] 函数式组件

function 函数名(){
  return vdom
}

[2] 类式组件

注意

tips: 组件的组件名必须 首字母必须 大写

组件名首字母必须大写的原因：当组件进行渲染时

• 若是首字母小写则默认为html标签->在react内部会去寻找对应的html标签，将其渲染为对应的html标签，找不到对应的html标签就会报错；
• 若是首字母大写则默认为组件->在react内部会通过标签名找到对应的组件
  • 组件为函数组件则会直接调用该函数得到对应的虚拟dom;
  • 组件为类式组件则会通过new关键字创建该类的实例化对象并通过该实例对象调用render方法得到虚拟dom;

组件中的this指向

函数式组件

<div id="box"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
  // [1]函数式组件
  function Fun(){
    console.log('this', this) // undefined
    return (
      <h1>
        <span>我是h1中的span标签</span>
      </h1>
    )
  }
  ReactDOM.render(<Fun />, document.getElementById('box'))
</script>

通过上述案例可以看出，函数式组件内部的this指向的是undefined；

原因是：在react内部发现组件是函数式组件时就会直接调用该函数, 得到对应的vdom并渲染。

注：在非严格模式下，直接调用函数，函数内部的this指向的是Window；在严格模式下，直接调用函数，函数内部的this指向的是undefined。
jsx语法进行编译时，会先通过babel进行编译；babel进行编译时使用的是严格模式，因此jsx语法下函数组件中的this指向的是undefined!

类式组件

<div id="box"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
  // 类式组件
  class Lei extends React.Component{
    render(){
      console.log('render', this) // Lie
      return (
        <h1>
          <span>我是h1中的span标签, value:{this.getvalue()}</span>
          { 
            // 点击时打印undefiend
          }
          <span onClick={this.getvalue}>点击查看函数this指向</span> 
        </h1>
      )
    }

    getvalue(){
      console.log('function', this) // Lie
      return 'value'
    }
  }
  ReactDOM.render(<Lei />, document.getElementById('box'))
</script>
</script>

• [1] render函数的this指向为实例化对象
  • 在react内部发现组件是类组件时就会通过 new关键字调用类构造函数得到实例化对象通过实例化对象调用render函数得到虚拟dom。因此render函数的this指向指向的是 实例化对象
• [2] 方法
  • 若是函数是通过this调用，该函数内部的this指向实例化对象
  • 若是函数进行事件绑定，该函数内部的this指向undefined
• [3] 生命周期函数