在ReactJS中直接在类定义上设置一个字段

Setting a field directly on the class definition in ReactJS

本文关键字：字段 一个 设置 ReactJS 定义      更新时间：2023-09-26

在ReactJS中这样做是一个很好的做法吗?

var Component = React.createClass({
    render: function () {
        return (<div></div>);
    },
    field: 'value', // is this safe?
    method: function () { 
        // do something with field
    }
})

在开始建议我应该使用this.props或this.state之前，对我来说情况并非如此，因为这些字段不以任何方式直接影响渲染，它们只是一起工作来控制渲染。

我想使用React类，因为我做常规的javascript '类'。

我主要关心的是如何在React内部处理这些字段和方法，如果字段是在实例本身或直接在原型上设置的，这将不适合我需要的。

我运行了一个快速测试，似乎字段设置在实例上，方法设置在原型上，这是理想的。但这是预期的和记录的行为吗?这对未来的版本安全吗?

我认为它可以像你这样工作，而且它是安全的。但是，如果我理解得好，您正在视图中直接进行数据计算/转换。所以我建议你从视图中删除这个逻辑，并在mvc或mv*的模型部分中处理它，在你的主干模型中，或者在你的通量存储中。

这样你就不会混合数据转换逻辑和纯呈现。

我会这样说，我已经使用这样的东西一段时间了，还没有看到任何问题。例如，假设您想要传递给嵌套组件的某种处理程序，您将在此组件中创建该函数并将其作为prop传递给子组件。我相信他们在ReactJS Facebook网站上有使用类似概念的例子。

在底层，React只是循环遍历你传递给createClass的对象的属性，并将它们复制到组件的原型中。像字符串或数字这样的基本值显然不能通过引用复制，所以不要在所有实例中共享，而对象、函数、数组等可以。

如果你想使用组件实例的本地值，你需要使用state API。我不确定你所说的"[状态和道具]不以任何方式直接影响渲染，它们只是一起工作来控制渲染"是什么意思。道具和状态的全部意义在于它们一起工作来生成(重新)渲染时使用的值。

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

React组件应该只在改变道具或改变状态时进行渲染。你不能/不应该通过直接改变其他字段来触发重新渲染。

你需要把你的组件看作一个更接近于纯函数的东西。State和props放在顶部，静态的VDOM/HTML显示出来。

我将把你的例子重写为

var Component = React.createClass({
  getInitialState: function () {
    return {field: 'value'};
  },
  render: function () {
    var field = this.state.field;
    return (<div>{field}</div>);
  },
  method: function () { 
    var field = this.state.field;
    // do something with field
    this.setState({field: 'anotherValue'});
  }
})
相关文章：