鍍金池/ 問答/HTML/ react為什么用class和箭頭函數(shù)效果是一樣的

react為什么用class和箭頭函數(shù)效果是一樣的

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
回答
編輯回答
九年囚

當(dāng)然的拉，本質(zhì)上兩者都是函數(shù)，他們執(zhí)行后return返回出來的都是dom節(jié)點(diǎn)。

表面上一看，你這么寫沒毛病效果一樣，但是沒有了解其本質(zhì)區(qū)別。
1就是一個(gè)函數(shù)，執(zhí)行后返回出return的dom。你也可以返回其他東西，不一定是dom元素；
2在React區(qū)別與1中有啥區(qū)別知道嗎？1中的sd不能被react的state所管控。而2中的sd這個(gè)值可以被這個(gè)組件的state所管控。

直白點(diǎn)說，2中擁有React的所有生命周期和各種鉤子。

2017年12月20日 05:12
編輯回答
毀憶

第一個(gè)是無狀態(tài)組件，第二個(gè)是有狀態(tài)的

2017年2月22日 20:26
編輯回答
澐染

第一種寫法是無狀態(tài)組件的寫法。無狀態(tài)組件只有props，沒有state和一系列的生命周期函數(shù)。因此，無狀態(tài)組件更新和渲染的速度比較快！如果你的組件沒有state和生命周期控制的話，推薦使用這種書寫方式！

第二種寫法則是一般的react組件的書寫方式，包括了props，state和一些列的生命周期函數(shù)。你可以對組件的狀態(tài)進(jìn)行和各生命周期進(jìn)行控制。

2017年10月30日 12:03
編輯回答
夏夕

談到組件，我們就有必要談?wù)?code> React 組件 的三種寫法：

1、ES5-寫法 React.createClass（原始的createClass寫法）

早期React使用該方法來構(gòu)建一個(gè)組件，它接受一個(gè)對象為參數(shù)，對象中必須聲明一個(gè)render方法，render返回一個(gè)組件實(shí)例，現(xiàn)階段已不推薦使用createClass方法來創(chuàng)建組件，基于es5，加上臃腫，this自綁定導(dǎo)致性能略差，注定是要被淘汰的。大致代碼如下：

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語法創(chuàng)建有狀態(tài)組件，也就是我們可以使用class MyComponent extends React.Component{...}的方式創(chuàng)建組件，大致代碼如下：

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

React.Component的特點(diǎn)：
（1）、React.createClass通過getInitialState函數(shù)初始state，而React.Component是在constructor中直接聲明state的。
（2）、React.createClass的this是自動(dòng)綁定的，而React.Component需要手動(dòng)綁定。

3、無狀態(tài)的函數(shù)式寫法（純組件 SFC）

React.createClass和React.Component都可以用來創(chuàng)建有狀態(tài)的組件，而 v0.14 之后官方提出了無狀態(tài)組件 - Stateless Component。該寫法不需要管理狀態(tài)state，數(shù)據(jù)直接通過props傳入，這也符合 React 單向數(shù)據(jù)流的思想，同時(shí)提高代碼的可讀性和大大減少代碼量，大致代碼如下：

const MySFC= (props) => (
    <div>
        // props就是要展示的數(shù)據(jù)
    </div>
);

無狀態(tài)組件的特點(diǎn)：
（1）、組件不會(huì)被實(shí)例化，整體渲染性能得到提升
（2）、組件無法訪問生命周期的方法

2017年12月14日 07:19