爲什麼componentDidMount方法不會被調用在reactjs.net當我寫的JSX

Question

我是小白，我嘗試編譯JSX下面這個教程：使用

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

reactjs.net ``

在我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> 
    } 

} 

在我ReactConfig.cs

 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 'mount，只打印

的 「Hello World」

有誰知道這是爲什麼方法從不叫什麼？

預先感謝您

Answer 1

你的問題是你不使用this.setState。您在this.state中手動分配新值。 React不知道再次調用render來更新組件，這就是您的組件不更新的原因。這並不是this.state沒有改變。 React沒有被告知更新屏幕上顯示的內容。所以，這裏就是你的代碼中的生命週期方面發生了：

1. constructor：初始化一切（杜）
2. componentWillMount：在你的情況，設置this.state.name。 渲染尚未
3. render不會發生：呈現this.state.name，你在你的componentWillMount
4. componentDidMount已設置：設置this.state.name到新的價值。 沒有說明更新您的渲染功能

如果您在使用componentDidMountthis.forceUpdate()，分配this.state.name其新的價值後，我相信它會更新，但是這是非常不好的做法。改爲使用this.setState。

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

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

正如你在你的代碼已經注意到，this.setState不componentWillMount完全必要的，因爲render沒有被調用呢。但保持事物一致性是很好的。