有没有一种在React.js中使用私有变量和方法的好方法

Question

我注意到我可以使用这样的私有变量:

var Hello = React.createClass(new (function(){

    var name;

    this.getInitialState = function() {
        name = "Sir " + this.props.name;
        return null;
    };

    this.render = function() {
        return <div>Hello {name}</div>;
    };
})());

React.render(<Hello name="World" />, document.getElementById('container'));

为什么我不应该这样做？

感谢您的任何帮助

Answer 1

当您需要组件的本地（私有）状态信息且不会直接更改或与渲染相关时，私有变量是完美的选择。请记住，大多数事情都会改变渲染，所以我发现我很少使用私有变量。

另外，请记住，当您按照您的方式向类添加变量时，它是一个单例，因此它将与该组件的所有实例共享。如果真的想要每个实例私有的东西，这可能会导致问题——如果这就是你想要的，那么你需要在组件的生命周期方法之一中声明它，可能像这样

componentDidMount() {
    this.name = 'hello';
},

Answer 2

如果您使用 es7，您可以将类属性定义为私有变量，如下所示：

class Hello extends React.Component {
  name = 'Jack';
  render() {
    return (
      <div>
        {this.name}
      </div>
    );
  }
}
export default Hello;

请务必使用babel编译阶段 0 的代码

Answer 3

我不认为这有什么问题。语法有点时髦，但这是一个聪明的技巧。

我会质疑是否需要一个真正的私有变量。我只能想到为什么有人想要一个的两个原因，但这两个原因都可以被揭穿。

1）你创建一个库供其他人使用...如果有人在你的库代码中不应该出现的地方进行探索，那么他们要么破坏了自己的经验，要么解决了他们在你的代码中发现的错误。无论哪种方式，对您或他人都没有伤害。更糟糕的是，他们破坏了自己的应用程序。私有变量给我留下了来自 Flex 的非常不好的印象。在我看来，JavaScript 的开放性令人耳目一新。

2) 您想在应用程序中隐藏私有数据...使用现代浏览器，可以在运行时检查和修改 JavaScript 中的任何内容。在 JavaScript 中向用户隐藏数据是不可能的。你只能让事情变得很难找到。

我知道这个替代方案并不是真正的私有，但用法是相同的。由于我不太热衷于努力将事情保密，所以无论如何我都会将其包括在内。;G）

var Hello = React.createClass({

    name: null,

    getInitialState: function() {
        this.name = "Sir " + this.props.name;
        return null;
    },

    render: function() {
        return <div>Hello {this.name}</div>;
    };
});

React.render(<Hello name="World" />, document.getElementById('container'));