React爬坑秘籍(一)--提升渲染性能 ##前言 来到腾讯实习后,有幸八月份开始了腾讯办公助手PC端的开发.因为办公助手主推的是移动端,所以导师也是大胆的让我们实习生来技术选型并开发,他来做code review.之前也学习过React,当然也是非常合适这一次的开发. 我会梳理这一个月来,自己对架构的思考过程和踩过的坑.当然这一切都不一定是最佳的,所以希望能有更多的建议和讨论. 例子所需库:Webpack.React.Immutable.其中Webpack用于前端构建,如果不清楚的同学可以看这…

React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick="activateLasers()"> // onClick = "xxxx()" 激活按钮 </button> react 中的写法: <button onClick={activateLasers}> // onclick = { xxxx…

React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式创建的组件够可以通过属性来控制传入组件的参数,如下例: // 创建 HelloMessage 组件 class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h…

之前,一直在纠结是学习angular好,学习vue好,还是学习react好,网上一搜索,也是各种对比,各种互喷,看过之后更纠结.就跟小时候一样纠结长大了是上清华好,还是上北大好,最后证明我想多了.总之,选择一个中意的,管他好不好,就是干,不试又怎么知道-  我学习react是从新手教程这篇大神的帖子开始的.虽然是跟着大神的步骤一步一步来,但还是免不了出错.遇到的第一个错误就是output.path不是绝对路径.报错是这样式儿的 最后通过查文档查资料,终于解决了,两种方法,分别是这样式儿的. (一…

常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" ></div> 但是在React中,是没有onselectstart事件的 我们只需要给标签添加个样式就可以了. .node{/*node为标签的class名*/ -webkit-user-select: none; -moz-user-select:none; -o-user-select:…

使用es6语法与原本es5语法几个有区别的地方 1.React.creatClass与React.Component var Component = React.createClass({ render() { return ( <div></div> ); } }); class Component extends React.Component { constructor(props) { super(props); } render() { return ( <div&…

1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态渲染iconfont标签,需如下处理,icon为形参 <i dangerouslySetInnerHTML={{__html: icon}} className={'iconfont'} /> c.引入项目中:需要在项目中复制iconfont的地址代码,类似如下的地址,官网生成 @font-fac…

React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3.Unmounting:已经移出 DOM 树: 生命周期的钩子函数:(v16之前) 1. componentWillMount  首次渲染之前调用: 2. componentDidMount  第一次渲染后调用: 3. componentWillReceiveProps 在组件接收到一个新的 prop…

最近几天差点就被这鬼东西给逼疯了,truffle init .truffle unbox webpack 不管我怎么运行都是对的,唯独truffle unbox react 不管在哪个windows都会报错,换了好几台电脑,心都累完了,还好我坚持了下来,找了无数方法之后,刚刚我终于找到正确的方法了! Error with npm install , NPM安装错误分析 按照上面的方法,执行十来分钟后,再重启cmd,运行truffle unbox react  就成功了!其实也就两条命令: # b…

componentDidMount :生命周期在react下只调用一次, render:比它先执行 componentWillRecvieProps(newProps) :能取到父组件的值 render(){ return } 下需要返回,不然报错 父组件传值 父组件:index render(){ const {data} = this.state return( <div className="hhd"> <Tiem states={data}></T…