は、なぜ私はnoobのだJSX

Question

に書くときcomponentDidMount方法はreactjs.netに呼び出されていないと私は、このチュートリアルの次JSXをコンパイルしようとしている：使用

http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/

reactjs.net ``私のReactConfig.csで私のhelloWorld.jsx

class PageContent extends React.Component { 


    componentDidMount() { 
       this.state = { name: "Hello World from ComponentDidMount" }; 
    } 

    constructor(props) { 
     super(props); 
     this.state = { name: "Hello World" }; 
    } 

    componentWillMount() { 
     this.state = { name: "Hello World from ComponentWIllMount" }; 
    } 

    render() { 

     return <h1>{this.state.name}</h1> 
    } 

} 

で

 ReactSiteConfiguration.Configuration 
     .AddScript("~/Scripts/components/helloWorld.jsx"); 

私Default.aspx.cs

 var env = AssemblyRegistration.Container.Resolve<IReactEnvironment> 
     (); 
     var objectModel = new { user = "React User" }; 
     var reactComponent = env.CreateComponent("PageContent", 
     objectModel); 

     PageContent.Text = reactComponent.RenderHtml(); 

でページが

を "コンポーネントからのHello Worldがマウントされます" それは

を出力細かい

を働くように見えます

しかし、私はComponent Will Mountにコメントするとき、DidMから何も受け取らないount、それだけで

の "Hello World" を出力します

このメソッドが呼び出されることはありません、なぜ誰もが知っていますか？

は

Answer 1

あなたの問題は、あなたがthis.setStateを使用していないで、事前にありがとうございます。 this.stateに手動で新しい値を割り当てています。 Reactはrenderに再度コンポーネントをアップデートすることを知らないので、コンポーネントがアップデートされません。それは変更されていませんthis.stateは変更されていません。それはReactが画面に表示されているものを更新するように言われていないということです。

1. constructor：：だから、ここでの生活サイクルの面であなたのコードで何が起こるかだthis.state.nameを設定し、あなたのケースでは：すべて（当たり前）
2. componentWillMountを初期化します。 はまだ
3. renderを発生しないレンダリング：あなたはcomponentWillMount
4. componentDidMountに設定されているthis.state.nameを、レンダリング：新しい値にthis.state.nameを設定します。あなたはcomponentDidMountでthis.forceUpdate()を使用している場合は、その新しい値にthis.state.nameを代入した後、あなたのレンダリング機能を更新する何の指示

は、私はそれが更新してしまうと信じていませんが、これは非常に悪い習慣です。代わりにthis.setStateを使用してください。

componentDidMount() { 
    this.setState({ name: "Hello World from ComponentDidMount" }); 
} 

componentWillMount() { 
    this.setState({ name: "Hello World from ComponentWillMount" }); 
} 

あなたのコードに気づいてきたように、renderがまだ呼び出されていないのでthis.setStateは、componentWillMountに完全に必要ありません。しかし、物事を一貫性を保つだけでいいのです。