当前位置: 首页 > 面试题库 >

React.Component与React.createClass

佟阳云
2023-03-14
问题内容

我很困惑,组件和React类之间有什么区别?

以及何时在React类上使用组件?看起来组件是一个类,createClass创建一个组件。

https://facebook.github.io/react/docs/top-level-
api.html

React.Component

使用ES6类定义它们时,这是React组件的基类。有关如何在React中使用ES6类的信息,请参见可重用组件。有关基类实际提供的方法,请参阅Component
API。

React.createClass

给定规范创建一个组件类。组件实现了一个返回单个子对象的render方法。该孩子可能具有任意深的孩子结构。使组件与标准原型类不同的一件事是,您无需在它们上调用new。它们是为您构造后备实例(通过新实例)的便捷包装。


问题答案:

mixins React.createClass不支持的唯一功能MyComponent extends React.Component

这样做getInitialState()你可以这样做:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

或者如果您使用像babel这样的转译器,则可以

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

除了可以使用createClass提供的自动绑定之外,您可以.bind(this)像上面所示使用显式绑定,或使用粗箭头ES6语法:

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

可以将其放入构造函数中,而不是将其放入componentWillMount中:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

在React文档本身中有更多细节,但是基本上React.createClass所购买的唯一附加功能是mixins,但是使用mixin可以完成的任何事情都可以通过上下文和更高顺序的组件来完成。



 类似资料:
  • 问题内容: 官方阵营文档状态“ 的只有比较浅的对象”,并建议针对这一点,如果状态是‘深’。 鉴于此,在创建React组件时,为什么会有人偏爱它? 问题 : 我们可能会考虑使用对性能有什么影响? 我猜 的执行只有浅薄的比较。如果是这种情况,难道说的方法不能用于更深层次的比较吗? “此外,会跳过整个组件子树的属性更新”-这是否意味着属性更改会被忽略? 如果有帮助的话,阅读该媒体博客会引起疑问。 问题答

  • 为什么在教程中使用react.createClass而不使用react.component?参见: 我们最终的目标是让ES6类完全取代React.CreateClass,但在我们有了当前mixin用例的替代品和对该语言中的类属性初始化器的支持之前,我们不打算不推荐使用React.CreateClass

  • 官方的React文档声明“ 只执行粗浅的比较。如果是这样,难道不能用上述方法进行更深入的比较吗? “此外,的跳过整个组件子树的prop更新”-这是否意味着忽略prop更改? 在阅读这个媒体博客时出现了一个问题,如果它有帮助的话。

  • 我想将我的React应用程序按块拆分,但遇到了一个问题。不呈现通过加载的子。下面的示例代码。 文件一: 文件二 然后检索下一个错误: 未捕获的错误:缩小的React错误#130;访问http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=未定义&args[]=获取完整消息,或使用非缩小的开发环境获取完

  • 我在下面添加可运行的代码段。第一个是React.PureComponent版本 为什么第二个成功运行,但第一个没有??我试图寻找原因,但没有找到任何好的理由

  • 我在React中测试ES6语法,并编写如下组件: