有没有一种在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

如果您使用的是es7，则可以将类属性定义为这样的私有变量：

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

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

Answer 2

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

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

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

Answer 3

我不认为它有任何问题。 语法有点时髦，但这是一个聪明的伎俩。

我会质疑真正私有变量的必要性。 我只能想到有人可能想要一个的两个原因，但两者都可以被揭穿。

1）你让一个图书馆被其他人消费......如果有人在你的图书馆代码中探究他们不应该的东西，他们要么打破他们自己的经验，要么解决他们在你的代码中发现的错误。 无论哪种方式，对您或他人都没有伤害。 更糟糕的是，他们打破了自己的应用程序。 私人变量在我的口中留下了非常糟糕的味道来自Flex。 JavaScript的开放性是IMO的新鲜空气。

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'));