如何在angular指令渲染模板完毕后再执行link方法，render完毕再在link中操作dom节点
解决办法很简单，在link方法中，使用$timeout(function(){
examplemyModule.directive('myTab',['$timeout',function($timeout){
restrict:'E',
repalace:true,
templateUrl:'19tpl.html',
myData:'='
controller:['$scope',function($scope){
$scope.name="ctrl共享的数据";
link:function(scope,element,attr,reController){
//在这里用jq操作dom
// console.log(scope.name)
// console.log(element)
// console.log(attr)
$timeout(function(){
console.log(element.find('li').length);
element.find('li').on('click',function(){
没有更多推荐了，
不良信息举报
举报内容：
如何在angular指令渲染模板完毕后再执行link方法，render完毕再在link中操作dom节点
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！react render 在每次渲染的时候 会执行什么生命周期方法_百度知道
react render 在每次渲染的时候 会执行什么生命周期方法
我有更好的答案
实例化----首次实例化--------getDefaultProps--------getInitialState--------componentWillMount--------render--------componentDidMount实例化完成后的更新----getInitialState----componentWillMount----render----componentDidMount存在期----组件已存在时的状态改变--------componentWillReceiveProps--------shouldComponentUpdate--------componentWillUpdate--------render--------componentDidUpdate销毁&清理期--------componentWillUnmount
采纳率：79%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
代码运行后疯狂执行，不知道为什么？或者说有没有更好的写法？代码如下：
//从父组件接收
componentWillReceiveProps(nextProps) {
this.setState({
code: nextProps.capacityBlockIndex
request = (str) =& {
console.log("done" + str);
//控制台疯狂的输出
url: '//api',
jsonp: 'callback',
'capabilityCode': str
success: (res) =& {
this.setState({
taskArr: res.values
error: () =& { }
if(this.state.code === 0){
this.request('infor_display_ability');
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你在render里调用request发起ajax请求 成功后setState然后重新渲染render调用request。。。开始循环
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能在这个生命周期中componentWillReceiveProps做setState操作。
这个钩子本身的触发条件就是state,或者props改变就执行，你这样写，肯定会一直相互反复触发的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第一：不能在render中调用ajax方法。render是纯函数，所以不能调用ajax方法。第二：componentWillReceiveProps方法，最好做个判断，this.props与nextProps，或者this.state与nextState不同的时候再执行。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
render -& 调用ajax -& 成功回调setState -& render死循环解决办法 在componentDidMount调用ajax
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你这是死循环啊亲，render里不能用this.setState()的。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(6783)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'asp.net mvc3 局部页面@RenderBody @RenderPage@RenderSection使用方法详细说明',
blogAbstract:'asp.net mvc3局部页面使用方法详细说明:1.模板页：@RenderBody()占位符在模板页中加入@RenderBody()占位符，@RenderBody()所站的位置就是需要填充的内容的位置。如果想要应用模板页，须向内容页加入@{&&& Layout = \"~/Views/Shared/_LogOnPartial.cshtml\";}~/Views/Shared/_LogOnPartial.cshtml为模板页位置，也可在配置默认值。2.局部页面：@RenderPage()需要调用局部页面的加入@RenderPage(\"~/Views/Home/_ViewPage1.cshtml\")~/Views/Home/_ViewPage1.cshtml为局部页面的位置。',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:8,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}React服务器端渲染实践小结 - 为程序员服务
React服务器端渲染实践小结
为什么是React？
React今年在国内特别火，一时间虚拟DOM（Virtual DOM）等酷炫概念一下刷新了很多前端开发同学的三观，关于性能优劣的争论也在知乎上看到不少。不得不说React解决了一些前端项目开发的痛点，而我最近的一年多的工作重心，都在
这样一个基于兴趣社交的web产品上，有很多感同身受的地方。
这个产品从初期只有移动端的2、3个页面，发展到现在50+移动页面，加上PC版的最近上线，中间经历了从2-3人的小项目到10+人团队的大型前端项目的巨大转变。这个过程中除了人员相对业务的线性增加，代码量、维护成本也是以指数速度增长的，很快代码臃肿、难以维护与测试等问题就凸显出来。虽然内部经过一些轻量的重构优化，但开发模式还是与高度的迭代节奏很不匹配。这时候，React＋Webpack的组件开发模式让我眼前一亮，暗下决心要让这样的先进开发模式推广到项目团队，好东西一定要让大家有所受益，而不仅仅是技术的尝鲜、摆设。
为什么要在服务端渲染？
除了代码维护性的问题，项目代码膨胀导致的一个问题是基础库、公共资源的变大，从而导致页面加载性能日益下降。在使用React时，也第一时间考虑到对加载性能的影响，本来页面就要等待ajax返回数据，页面会不会因为React的引入变得更慢呢？不要说React那点大小根本不是事儿，在移动网络下（包含2G啊T_T）任何资源都是很珍贵的。有没有同时提高代码维护性，又能提升页面加载速度的好事呢？答案终于回到主题，就是在服务端渲染React。这里可以一并总结该方案的好处：
加速首屏渲染速度
享受React组件式开发的优势：高复用、低耦合
前后端维护一套代码（代码同构）
如果听到AngularJS在服务器端使用，你可能会很惊讶。但是对ReactJS，完全不必如此，因为React很好的分离了DOM的操作，使得在服务器端输出页面字符串有了可能。最新的React版本0.14.1中，已经彻底将服务端需要的源码分离出来。
我们使用的核心API就是ReactDOMServer.renderToString，它只会在服务端使用，并返回组件渲染数据后的HTML字符串。而接下来要做的，就是将这个HTML片段拼接回页面模版，返回到前端浏览器进行用户侧的显示。
这里还要补充一句，React组件在服务端的生命周期方法，只会执行到componentDidMount之前的方法，因为在服务端没有组件挂到文档DOM树的概念。
Node端的组件加载
我们要在Node端渲染组件，首先需要加载到组件，像这样：
Crayon Syntax Highlighter v2.7.1
var React = require('react');
var someComponent ＝ React.createFactory(require('./SomeComponent.jsx'));
[Format Time: 0.0018 seconds]
但是Node默认状况是不懂怎么解析JSX文件的，所以要在之前加上：
Crayon Syntax Highlighter v2.7.1
require('node-jsx').install({
extension: '.jsx'
[Format Time: 0.0008 seconds]
React组件渲染
加载到了React组件，等到后端的数据data也拿到后，就可以进行组件的渲染了：
Crayon Syntax Highlighter v2.7.1
var reactHtml = React.renderToString(someComponent(data));
[Format Time: 0.0004 seconds]
data是一个json对象，比如data＝{'type':'test'}，这时候data会以props的形式传递给组件，类似于在jsx中这样写：
Crayon Syntax Highlighter v2.7.1
&SomeComponent type="test" /&
[Format Time: 0.0003 seconds]
拼接返回HTML
这时候组件的HTML已经渲染完毕了，可以作为HTTP的返回体的一部分返回到浏览器了，这时候大家可以根据自己的项目框架进行操作。我们在这里使用了Koa的框架，并使用了ejs的模版，所以可以参考代码：
Crayon Syntax Highlighter v2.7.1
var render = require('koa-ejs');
render(this.app, {
root: path.join(__dirname, '../view'),
layout: false,
viewExt: 'ejs',
cache: true,
debug: false
yield this.render(templateName, {
reactOutput: reactHtml,
[Format Time: 0.0017 seconds]
到这里基本就完成了在服务端进行React组件的渲染，但其中还有一些小问题，我们接着继续探讨。
关于前后端共用代码的问题
我们的JSX文件在前端与Node端是完全复用的，而服务端用到的实际代码比浏览器需要的更少，但还是有一些差异需要注意：
前后端环境的判断方法
我个人建议通过window对象来判断，因为之前使用过moduel对象来判断，会因为webpack的打包代码导致客户端侧的运行会有问题。
Crayon Syntax Highlighter v2.7.1
var isNode = typeof window === 'undefined',
React = require('react');
[Format Time: 0.0010 seconds]
资源加载差异化
我们在进行组件化开发的模式式，样式文件也是通过require方法来引入的，而Node同样是无法默认解析样式文件的。类似的，一些浏览器环境需要的工具脚本，一定是依赖浏览器API的（BOM对象），所以也不应该在Node加载，于是就有了：
Crayon Syntax Highlighter v2.7.1
if (isNode) {
// 服务端需要的资源
// 组件样式
require('./Main.less');
var ajax = require('js/ajax.js');
// 前端渲染组件，服务端渲染时不需要
var SlidingBar = require('../../components/SlidingBar.jsx');
// 一些mixin也不需在Node加载
[Format Time: 0.0014 seconds]
生命周期方法注意
前面也提到了，React组件在服务端只有componentDidMount之前的方法会被执行，因此也要保证在getInitialState、render等方法中不会使用到浏览器 API，而将相应的操作放到componentDidMount中执行，如ajax。另外在使用mixin时也需要注意。
关于前后端复用代码这事儿
有必要吗？
有同学会想，既然都支持服务端渲染了，全部走后端渲染呗，还搞啥前端部分的代码。（干脆我用php也能搞定，那可是世界上最好的语言，不就是动态内容嘛）
我是这么想的，原始的纯前端渲染还是有必要的，一是开发调试方便，二是在任何情况下都有另外的选择，比如目前我们采用的方案是集群的负载均衡，一个用户访问的请求，有可能是通过html＋js的页面渲染，也有可能是服务器直接吐出渲染好的页面，只是其中的权重有所不同（服务端渲染的概率会更高）。当前端或后端逻辑出现异常或服务波动，对于用户来说都不受影响。
如何复用模版？
对于页面的容器来说，纯前端渲染的容器是HTML文件，而后端则是ejs的模版文件。发布时需要对二者同时发布，并需保持内容的一致性。这里可以通过构建工具来解决，服务端需要的ejs相对html文件只是多需要一些占位变量。
后端性能相关
请求放在后端渲染，势必会多一些压力点。除了需要在接入层做到负载均衡，在缓存上也可以考虑分布式缓存等优化策略。在数据超时的情况，也需要保证页面的正常输出，而此时返回的内容其实就等同于非服务端渲染的HTML页面内容。
在React后端渲染的范畴内，目前在国内没有找到较为系统的实践总结，同时在React研发团队的支持方面，可以看到目前还有很多优化的工作正在计划（国外有不少开发者吐槽过React在服务端的性能）。但我希望可以有更多的人来尝试这个方向，并与我们进行交流，共同进步～
欢迎感兴趣的同学进行留言，或关注我的微博
腾讯全端 AlloyTeam 团队 Blog
原文地址：, 感谢原作者分享。
您可能感兴趣的代码}