react状态组件state定义在constructor里外的区别

头像
记得要微笑
阅读 9 分钟
6

在react状态组件中state定义方式分为两种，一种是在construcor中定义；另一种是在constructor外面定义。网上有些人说state属性定义在constructor里面时，state挂在组件实例上，定义在constructor外面会挂在原型对象上。为了方便分析两种定义方式之间的区别，下面通过babel转译到ES5。

1、配置好babel

这里我们采用babel7版本

cnpm i @babel/core @babel/cli @babel/preset-env @babel/preset-react -D

在项目根目录下新建.babelrc配置文件，babel命令默认寻找该文件

// .babelrc
{
    presets: ["@babel/preset-env", "@babel/preset-react"]
}

在package.json添加指令脚本

"scripts": {
    "babel": "babel ./demo3.jsx -o build.js"
  },

2、编写class状态组件

state在constructor里面

import React from 'react'

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  render() {
    return <div>{this.state.count}</div>
  }
}

state在constructor外面

安装@babel/plugin-proposal-class-properties，修改.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

import React from 'react'

export default class App extends React.Component {
  // 下面state写法属于ES7语法，目前浏览器还不支持，需要安装@babel/plugin-proposal-class-properties，并在.babelrc中plugins属性中配置
  state = {
    count: 0
  }

  render() {
    return <div>{this.state.count}</div>
  }
}

3、比较两者转义结果

state在constructor里面

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var App = /*#__PURE__*/function (_React$Component) {
  _inherits(App, _React$Component);

  var _super = _createSuper(App);

  // Support for the experimental syntax 'classProperties' isn't currently enabled
  // Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
  function App() {
    var _this;

    _classCallCheck(this, App);

    _this = _super.call(this);
    _this.state = {
      count: 0
    };
    return _this;
  }

  _createClass(App, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", null, this.state.count);
    }
  }]);

  return App;
}(_react["default"].Component);

exports["default"] = App;

state在constructor外面

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var App = /*#__PURE__*/function (_React$Component) {
  _inherits(App, _React$Component);

  var _super = _createSuper(App);

  function App() {
    var _this;

    _classCallCheck(this, App);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      count: 0
    });

    return _this;
  }

  _createClass(App, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", null, this.state.count);
    }
  }]);

  return App;
}(_react["default"].Component);

exports["default"] = App;

转义后导出规则采用的commonjs，我们写一个index.js导入App来看看state属性在哪？

// index.js
const App = require('./build.js').default // 得到的是App构造函数
console.log(new App())
console.log(App.prototype)

state定义在constructor里面打印结果

App {
  props: undefined,
  context: undefined,
  refs: {},
  updater: {
    isMounted: [Function: isMounted],
    enqueueForceUpdate: [Function: enqueueForceUpdate],
    enqueueReplaceState: [Function: enqueueReplaceState],
    enqueueSetState: [Function: enqueueSetState]
  },
  state: { count: 0 }
}
App {}

state定义在constructor外面打印结果

App {
  props: undefined,
  context: undefined,
  refs: {},
  updater: {
    isMounted: [Function: isMounted],
    enqueueForceUpdate: [Function: enqueueForceUpdate],
    enqueueReplaceState: [Function: enqueueReplaceState],
    enqueueSetState: [Function: enqueueSetState]
  },
  state: { count: 0 }
}
App {}

我们看到这两种定义方式转义后打印结果是一样的，state属性都是挂在组件实例上。

参考：
https://github.com/babel/babe...

react组件化
记得要微笑
1.9k 声望4.5k 粉丝

知不足而奋进，望远山而前行，卯足劲，不减热爱。

« 上一篇
React-Router 的 Hooks
下一篇 »
读懂react类组件中定义的static方法

引用和评论

被 1 篇内容引用
推荐阅读
头像
如何使用 webpack 优化 lodash

记得要微笑赞 1阅读 581

头像
一些react使用小技巧（上）

夕水赞 10阅读 1.4k

头像
一些react使用小技巧（中）

夕水赞 7阅读 1.4k评论 5

头像
一些react使用小技巧（下）

夕水赞 5阅读 1.4k评论 6

头像
深入浅出React中的refs

夕水赞 3阅读 1.6k

头像
这个前端神器，竟让滴滴、美团都爱不释手？！

白水赞 4阅读 494评论 1

头像
ReactNative开发笔记（持续更新...）

kovli阅读 4.9k

0 条评论
得票最新