在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/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返回出來(lái)的都是dom節(jié)點(diǎn)。

表面上一看，你這么寫(xiě)沒(méi)毛病效果一樣，但是沒(méi)有了解其本質(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)說(shuō)，2中擁有React的所有生命周期和各種鉤子。

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

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

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

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

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

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

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

1、ES5-寫(xiě)法 React.createClass（原始的createClass寫(xiě)法）

早期React使用該方法來(lái)構(gòu)建一個(gè)組件，它接受一個(gè)對(duì)象為參數(shù)，對(duì)象中必須聲明一個(gè)render方法，render返回一個(gè)組件實(shí)例，現(xiàn)階段已不推薦使用createClass方法來(lái)創(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-寫(xiě)法 React.createClass</div>
        );
    }
 });

2、ES6-寫(xiě)法 React.Component

從v0.13版本，官方就推薦用 ES6 的class語(yǔ)法創(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-寫(xiě)法 React.Component</div>
        )
    }
}

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

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

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

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

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

2017年12月14日 07:19