react-函数组件与类组件

函数组件与 class 组件

函数组件

//创建函数式组件
function Mycomponent() {
  console.log(this); //此处的 this 为 undefined,因为Babel编译后开启了严格模式
  return <div>我是用 函数组件 创建的组件,适用于简单场景</div>;
}
//渲染组件
ReactDOM.render(<Mycomponent />, document.getElementById("root"));
/*
执行了ReactDOM.render(<Mycomponent />,document.getElementById("root"))后,发生了什么?
1.react解析组件标签,找到了 Mycomponent 组件
2.发现 Mycomponent 是函数定义的,调用该函数,将返回的虚拟DOM转为真实DOM,呈现在页面上
 */

类组件

//创建类组件
class Mycomponent extends React.Component(
  render(){
    //render放在哪里?---> Mycomponent的原型对象上
    //render中的 this 指向?---> Mycomponent的实例对象
    return(
      <div>我是用 类组件 创建的组件,适用于复杂场景</div>
    )
  }
);
//渲染组件
ReactDOM.render(
  <Mycomponent/>,
  document.getElementById("root")
)
/*
执行了ReactDOM.render(<Mycomponent />,document.getElementById("root"))后,发生了什么?
1.react解析组件标签,找到了 Mycomponent 组件
2.发现 Mycomponent 是类定义的, new 出该类的实例,通过实例调用原型上的 render 方法
3.将虚拟DOM转为真是DOM,呈现在页面上
 */

引用组件

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

函数组件和 class 组件的区别

用构造函数创建出来的组件，叫做“无状态组件”；

用 class 关键字创建出来的组件，叫做“有状态组件”；

有状态组件和无状态组件之间的本质区别是有无 state 属性。

注意

使用 class 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数以及 refs
使用 function 创建的组件，只有 props，没有自己的私有数据和生命周期函数和 refs