React框架-函数组件与类组件学习


一、类组件

类组件的代码使用方式如下所示:

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }

  add() {
    this.setState({ n: this.state.n + 1 });
  }

  render() {
    return (
      <div className="Son">
        儿子n :{this.state.n}
        <button onClick={() => this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}

1.类组件创建类后必须要继承React.Component

2.必须要有render 函数,返回的是react标签

3.render 中必须有return

 ReactDOM.render('类组件名', 'DOM对象')
        /*
        react可以调用ReactDOM.render方法将自定义的类组件放入真实dom中进行渲染,具体步骤如下所示:
        1.react解析组件标签,判断组件类型,类组件自动new一个类组件实例
        2。调用类组件中的render函数
        3.将render中返回的虚拟dom渲染到真实dom中
        */

二、函数组件

const Grandson = () => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};

函数组件也跟类组件一样使用ReactDOM.render方法在真实DOM容器中进行渲染
注意! 在函数组件中的this指向并不是指向window,因为react开启了Babel严格模式,严格模式最大的特点就是禁止this指向window;因此在函数组件中this指向undefined


二者的区别所在

1.类组件有生命周期,函数组件没有

2.类组件需要继承 Class,函数组件不需要

3.类组件可以获取实例化的 this,并且基于 this 做各种操作,函数组件不行

4.类组件内部可以定义并维护 state, 函数组件为无状态组件(可通过hooks进行实现)

相比较类组件,函数组件优点是更加轻量与灵活,便于逻辑的拆分复。

函数组件捕获了渲染时所使用的值,这是两类组件最大的不同。
React框架做的本质工作就是吃入数据,吐出UI,把声明式的代码转换为命令式的 DOM 操作,把数据层面的描述映射到用户可见的 UI 变化中去。
React的数据是和渲染绑定在一起的,而类组件是无法做到这一点

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值