有沒有一種在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'));