在React.js中是否有好的方法来使用私有变量和方法?

Is there a good way to use private variables and methods in React.js

本文关键字：方法 变量 js React 是否      更新时间：2023-09-26

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

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

为什么我不应该这样做?

感谢您的帮助

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

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

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

如果你使用的是es7，你可以像这样将类属性定义为私有变量:

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

一定要使用babel编译第0阶段的代码

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

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

1)你创建了一个供其他人使用的库…如果有人在你的库代码中探查他们不应该出现的地方，他们要么是打破了自己的经验，要么是在解决他们在你的代码中发现的bug。不管怎样，对你和别人都没有伤害。更糟糕的情况是，它们会破坏自己的应用程序。私有变量给我留下了来自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'));
相关文章：