React数据获取为什么一定要在vue componenttDidMount里面调用

来源：蜘蛛抓取(WebSpider) 时间：2017-08-20 02:52 标签： encodeuricomponent
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
根据文档说法，从后台获取数据一定要放在componentDidMount里面调用，为什么不能在constructor或者componentWillMount里面调用？有什么不同？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为有很多前置工作要做
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这与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 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
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
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：&title&hello world React.js&/title&
&script src="build_0.13/react.min.js"&&/script&
&script src="build_0.13/JSXTransformer.js"&&/script&
&div id="e"&&/div&
&script type="text/jsx"&
var Hello = React.createClass({
getInitialState:function(){
return {opacity:1.0};
componentDidMount:function(){
this.timer = setInterval(function(){
var opacity = this.state.
opacity -= 0.1;
if(opacity & 0.1){
opacity = 1.0
this.setState({
opacity:opacity
}.bind(this), 100);
render:function(){
&div style={{opacity:this.state.opacity}}&
hello {this.props.name}
//添加组件到e中
React.render(
&Hello name="world" /&,
document.getElementById("e")
组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
阅读(...) 评论()

我要回帖

更多关于 encodeuricomponent 的文章

 

随机推荐