问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
var Diver = React.createClass({
getInitialState:function(){
return (styles = {
width:'100%',
height:'100%',
background:'red',
position:'fixed'
componentWillMount:function(){
alert('ok')
render:function(){
&div className = 'container' style={this.state}&{this.props}&/div&
componentDidMount:function(){
alert('OK')
React.render(
&Diver name = 'myname'/&,
document.querySelector('.wrap')
componentWillMount与componentDidMount这两个函数的作用是什么？还望大家赐教
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
will是在render之前调用，did是在render之后调用，具体有什么用要看你在function里面怎么写。比如，will里面请求数据，did在告诉服务器render已经完成
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
正确的姿势是去翻翻react的官方文档： 里面详细讲了react component的lifecycle
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
官方文档有详细说明，两者主要区别是调用顺序，一个在render之前，一个在render之后。另外，官方建议是，用constructor()替换componentWillMount
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
react-native的componentWillMount和componentDidMount为什么有时候不执行？怎么才能在进入一个页面的时候，每次都执行这两个方法？求讲解！谢谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
进入新页面都会执行，除非你之前到过这个页面，离开的时候路由记录没有销毁。
你用的什么导航器？
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App浏览器中的工作原理
React提供了强大的抽象，让你在大多数应用场景中不再直接操作DOM，但是有时你需要简单地调用底层的API，或者借助于第三方库或已有的代码。
React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述，React能够利用内存中的描述来快速地计算出差异，然后更新浏览器中的DOM。
另外，React实现了一个完备的虚拟事件系统，尽管各个浏览器都有自己的怪异行为，React确保所有事件对象都符合W3C规范，并且持续冒泡，用一种高性能的方式跨浏览器（and everything bubbles consistently and in a performant way cross-browser）。你甚至可以在IE8中使用一些HTML5的事件！
大多数时候你应该呆在React的“虚拟浏览器”世界里面，因为它性能更加好，并且容易思考。但是，有时你简单地需要调用底层的API，或许借助于第三方的类似于jQuery插件这种库。React为你提供了直接使用底层DOM API的途径。
Refs和getDOMNode()
为了和浏览器交互，你将需要对DOM节点的引用。每一个挂载的React组件有一个getDOMNode()方法，你可以调用这个方法来获取对该节点的引用。
getDOMNode()仅在挂载的组件上有效（也就是说，组件已经被放进了DOM中）。如果你尝试在一个未被挂载的组件上调用这个函数（例如在创建组件的render()函数中调用getDOMNode()），将会抛出异常。
为了获取一个到React组件的引用，你可以使用this来得到当前的React组件，或者你可以使用refs来指向一个你拥有的组件。它们像这样工作：
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
this.refs.myTextInput.getDOMNode().focus();
render: function() {
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
&input type="text" ref="myTextInput" /&
type="button"
value="Focus the text input"
onClick={this.handleClick}
React.render(
&MyComponent /&,
document.getElementById('example')
更多关于 Refs
为了学习更多有关Refs的内容，包括如何有效地使用它们，参考我们的文档。
组件生命周期
组件的生命周期包含三个主要部分：
挂载： 组件被插入到DOM中。
更新： 组件被重新渲染，查明DOM是否应该刷新。
移除： 组件从DOM中移除。
React提供生命周期方法，你可以在这些方法中放入自己的代码。我们提供will方法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。
getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。
componentWillMount()在挂载发生之前立即被调用。
componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。
componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps，然后使用this.setState()来改变state。
shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数，优化this.props和nextProps，以及this.state和nextState的比较，如果不需要React更新DOM，则返回false。
componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。
componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。
componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。
挂载的方法（Mounted Methods）
_挂载的_复合组件也支持如下方法：
getDOMNode(): DOMElement可以在任何挂载的组件上面调用，用于获取一个指向它的渲染DOM节点的引用。
forceUpdate()当你知道一些很深的组件state已经改变了的时候，可以在该组件上面调用，而不是使用this.setState()。
跨浏览器支持和兼容代码（Browser Support and Polyfills）
在 Facebook，我们支持老版本的浏览器，包括 IE8。我们已经拥有适当地 polyfills 很长一段时间了，能够允许我们写有远见的 JS。这意味着在我们的代码库中没有黑客，我们仍然可以期待我们的代码“工作”。例如，不用写 +new Date()，我们可以只写 Date.now()。由于开源的 React 和我们内部使用的是一样的，所以我们采取了使用超前思维 JS 的这种理念。
除了那种理念，我们也确立了我们的立场，作为一个 JS 库的作者，不应该把 polyfills 作为库的一部分 shipping。如果每个库都这么做，很有可能你会多次发送相同的 polyfill，这可能相当于一部分无用代码。如果你的产品需要支持老版本的浏览器，很有可能你已经在使用类似
的东西了。
为了支持老版本浏览器所需的 polyfill
的 es5-shim.js 提供了 React 所需的如下方法：
Array.isArray
Array.prototype.every
Array.prototype.forEach
Array.prototype.indexOf
Array.prototype.map
Function.prototype.bind
Object.keys
String.prototype.split
String.prototype.trim
es5-sham.js，同样来自 ，提供了 React 所需的如下方法：
Object.create
Object.freeze
React 的 unminified 构建需要来自
的如下方法：
当使用 IE8 中的 HTML5 元素时，包括 &section&，&article&， &nav&，&header& 和&footer&，包含
或类似的一个脚本也是必须的。
跨浏览器问题
虽然 React 非常擅长抽象浏览器的差异，但是一些浏览器是有限制的或呈现出怪异的行为，对于这种行为我们不能找到解决方案。
IE8 的 onScroll 事件
在 IE8 中，onScroll 事件并不 buddle，并且 IE8 没有一个 API 定义处理程序来捕获一个事件的阶段，这意味着 React 没有办法监听这些事件。目前在 IE8 中，事件处理程序被忽略了。
更多信息请看 的 GitHub 问题。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
根据文档说法，从后台获取数据一定要放在componentDidMount里面调用，为什么不能在constructor或者componentWillMount里面调用？有什么不同？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感谢各位的回答：总结一下不建议在constructor和componentWillMount里写的原因是
会阻碍组件的实例化，阻碍组件的渲染
如果用setState，在componentWillMount里面触发setState不会重新渲染
而在React Redux中，由于触发的渲染方式不同，是可以不需透过React组件的生命周期方法，所以我感觉可以在生命周期的任何地方调用。当然，在consttructor和componentWillMount还是会阻碍一点点组件的实例化和渲染。
由于@eyesofkids写的全面一点，我采纳他的了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这与React组件的生命周期有关，组件挂载时有关的生命周期有以下几个:
constructor()
componentWillMount()
componentDidMount()
上面这些方法的调用是有次序的，由上而下，也就是当说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。
componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。
constructor被调用是在组件准备要挂载的最一开始，所以此时组件尚未挂载到网页上。
componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，所以它一般不会用来作加载数据之用，它也很少被使用到。
一般的从后台(服务器)获取的数据，都会与组件上要用的数据加载有关，所以都在componentDidMount方法里面作。虽然与组件上的数据无关的加载，也可以在constructor里作，但constructor是作组件state初绐化工作，并不是设计来作加载数据这工作的，所以所有有副作用的代码都会集中在componentDidMount方法里。
补充一下，Redux作初始数据载入时，是可以不需透过React组件的生命周期方法，大致的方式如下代码:
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App'
// reducer
function items(state = [], action) {
switch (action.type) {
case 'LOAD_ITEMS':
return [...action.payload]
return state
// 创建store
const store = createStore(items)
fetch('http://localhost:8888/items', {
method: 'GET'
.then((response) =& {
// ok代表状态码在200-299
if (!response.ok) throw new Error(response.statusText)
return response.json()
.then((itemList) =& {
// 作dispatch动作，载入外部数据完成之后
store.dispatch({ type: 'LOAD_ITEMS', payload: itemList })
.catch((error) =& { throw new Error(error.message) })
// React组件加载到真实DOM上
ReactDOM.render(
&Provider store={store}&
&/Provider&, document.getElementById('root'))
为何可以这样作的原因，是Redux的store中的状态有一个最初始的值(reducer上传参里的默认值)，组件先初始化完成，接著异步的fetch用promise语法，在作完外部数据加载后，发送动作出来，此时reducer更动store里的状态，react-redux绑定器会触发React组件的重渲染，所以组件上数据会自动更新。
有问题再问吧，代码写得简略但测试过是可执行的。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App