leecade / react-tips Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
componentDidUpdate: function() {
var node = this.getDOMNode();
node.scrollTop = node.scrollHeight;
},
仅当用户已经滚到底时执行策略
componentWillUpdate: function() {
var node = this.getDOMNode();
this.shouldScrollBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
},
componentDidUpdate: function() {
if (this.shouldScrollBottom) {
var node = this.getDOMNode();
node.scrollTop = node.scrollHeight
}
},
Insertion at the top
componentWillUpdate: function() {
var node = this.getDOMNode();
this.scrollHeight = node.scrollHeight;
this.scrollTop = node.scrollTop;
},
componentDidUpdate: function() {
var node = this.getDOMNode();
node.scrollTop = this.scrollTop + (node.scrollHeight - this.scrollHeight);
},
ref: http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html
react.js
和 react.min.js
前者用于开发, 包含额外的错误提示, 后者用上生产环境, 做了一些优化, 移除了错误提示
如果要在 webpack 打包出等价的 react.min.js
module.exports = {
//...
plugins:[
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: false
}
})
]
//...
}
观察 react 源码里存在大量环境判断类似:
function cloneWithProps(child, props) {
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== 'production' ? warning(didDeprecatedWarn, 'cloneWithProps(...) is deprecated. ' + 'Please use React.cloneElement instead.') : undefined;
didDeprecatedWarn = true;
process.env.NODE_ENV !== 'production' ? warning(!child.ref, 'You are calling cloneWithProps() on a child with a ref. This is ' + 'dangerous because you\'re creating a new child which will not be ' + 'added as a ref to its parent.') : undefined;
}
var newProps = ReactPropTransferer.mergeProps(props, child.props);
// Use `child.props.children` if it is provided.
if (!newProps.hasOwnProperty(CHILDREN_PROP) && child.props.hasOwnProperty(CHILDREN_PROP)) {
newProps.children = child.props.children;
}
// The current API doesn't retain _owner, which is why this
// doesn't use ReactElement.cloneAndReplaceProps.
return ReactElement.createElement(child.type, newProps);
}
这种分支判断属于空代码在压缩后会移除掉
componentDidMount
不会在服务端被渲染的过程中调用
阻止不必要的
render
, 优化性能, 可以 MixinPureRenderMixin
shouldComponentUpdate (nextProps, nextState) {
return this.state.checked === nextState.checked; // return false 则不更新组件
// 确定该组件渲染完后无需再次更新,即这个组件是一个静态组件,那么可以直接return false(优化性能)
// return false
}
反模式, this.props 计算后的值不应该赋给 state, 否则会导致计算后的值永远不会与派生出它的 props 值不同步
static defaultProps = {
data: new Date()
}
static state = {
data: this.props.date - new Date()
}
render () {
return <div>Day:{this.state.day}</div>
}
false
null
undefined
=> 真正的空
0
=> <span data-reactid=".0.1.1">0</span>
''
=> <span data-reactid=".0.2.1"></span>
NaN
=> <span data-reactid=".0.5.1">NaN</span>
例如: 移除子节点
否则在 setState -> 更新 DOM 时, 会抛出错误
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.