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

Question

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

Answer 1

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

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

Answer 2

谈到组件，我们就有必要谈谈 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）、组件无法访问生命周期的方法

Answer 3

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

Answer 4

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

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

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