Coder Social home page Coder Social logo

react-tips's People

Contributors

leecade avatar

Watchers

 avatar  avatar  avatar

react-tips's Issues

巧用生命周期, 选择在 before 或 after 插入元素

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.jsreact.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);
}

这种分支判断属于空代码在压缩后会移除掉

生命周期 Lifecycle

Instantiation

  1. getDefaultProps
  2. getInitialState
  3. componentWillMount
  4. render
  5. componentDidMount

componentDidMount 不会在服务端被渲染的过程中调用

setState

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

Mount

  1. componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

阻止不必要的 render, 优化性能, 可以 Mixin PureRenderMixin

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.