react为什么用class和箭头函数效果是一样的

我不是艾克
  • 518

1.

import React from 'react'

const Demo = () => {
  return (
    <div>sd</div>
  )
}


export default Demo

2.

import React from 'react'

class List extends React.Component {
    render() {
        return (
        <div>sd<div>
        )
    }
}
export default List
回复
阅读 2.1k
4 个回答
✓ 已被采纳

第一种写法是无状态组件的写法。无状态组件只有props,没有state和一系列的生命周期函数。因此,无状态组件更新和渲染的速度比较快!如果你的组件没有state和生命周期控制的话,推荐使用这种书写方式!

第二种写法则是一般的react组件的书写方式,包括了props,state和一些列的生命周期函数。你可以对组件的状态进行和各生命周期进行控制。

谈到组件,我们就有必要谈谈 React 组件 的三种写法:

1、ES5-写法 React.createClass(原始的createClass写法)

早期React使用该方法来构建一个组件,它接受一个对象为参数,对象中必须声明一个render方法,render返回一个组件实例,现阶段已不推荐使用createClass方法来创建组件,基于es5,加上臃肿,this自绑定导致性能略差,注定是要被淘汰的。大致代码如下:

var React = require('react');
var ReactDOM = require('react-dom');
var MyComponent = React.createClass({
    getDefaultProp:function() {
        return {};
    },
    getInitialState: function() {
        return {};
    },
    render: function() {
        return (
            <div>ES5-写法 React.createClass</div>
        );
    }
 });

2、ES6-写法 React.Component

从v0.13版本,官方就推荐用 ES6 的class语法创建有状态组件,也就是我们可以使用class MyComponent extends React.Component{...}的方式创建组件,大致代码如下:

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <div>ES6-写法 React.Component</div>
        )
    }
}

React.Component的特点:
(1)、React.createClass通过getInitialState函数初始state,而React.Component是在constructor中直接声明state的。
(2)、React.createClass的this是自动绑定的,而React.Component需要手动绑定。

3、无状态的函数式写法(纯组件 SFC)

React.createClass和React.Component都可以用来创建有状态的组件,而 v0.14 之后官方提出了无状态组件 - Stateless Component。该写法不需要管理状态state,数据直接通过props传入,这也符合 React 单向数据流的思想,同时提高代码的可读性和大大减少代码量,大致代码如下:

const MySFC= (props) => (
    <div>
        // props就是要展示的数据
    </div>
);

无状态组件的特点:
(1)、组件不会被实例化,整体渲染性能得到提升
(2)、组件无法访问生命周期的方法

第一个是无状态组件,第二个是有状态的

当然的拉,本质上两者都是函数,他们执行后return返回出来的都是dom节点。

表面上一看,你这么写没毛病效果一样,但是没有了解其本质区别。
1就是一个函数,执行后返回出return的dom。你也可以返回其他东西,不一定是dom元素;
2在React区别与1中有啥区别知道吗?1中的sd不能被react的state所管控。而2中的sd这个值可以被这个组件的state所管控。

直白点说,2中拥有React的所有生命周期和各种钩子。

你知道吗?

宣传栏