大幅提拔 React 机能的6个发起

2019年8月31日 137次阅读 来源: 张泽豪

React 在不做任何优化的情况下机能也异常好，但是经由过程一些小小的优化，可以让机能进一步提拔，经由过程以下这6条发起，可以数十倍加速衬着速率

设置 NODE_ENV 为 Production

React 在开辟环境下，有完全的正告和毛病搜检，但它们不是为临盆环境预备的，假如你看过 React 的源码，你会看到许多 if (process.env.NODE_ENV != 'production')，这些代码关于最终用户是不需要的，而且接见 process.env.NODE_ENV 会异常慢，关于临盆环境而言，完全可以移除这些代码

假如你运用 Webpack，你可以运用 DefinePlugin 来替代 process.env.NODE_ENV 为 ‘production’，然后运用 UglifyJsPlugin 移除这些不会实行的代码

// webpack.config.js
...
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
...

React 15 的衬着速率比 0.14 快约 25%

在 React 15 的更新中异常主要的一项是，运用在现代化浏览器中机能更好的 document.createElement 替代 innerHTML，这一修改也意味着 React 将不再支撑 IE8

Babel Constant 和 Inline Elements 转换

Babel 为开辟者们供应了 React Constant Elements 和 React Inline Elements，这两款插件可以在编译阶段将代码转换成更高效的情势，注重仅将它们用于临盆环境

封装鸠合衬着为自力组件

这一点在轮回衬着鸠合组件时特别主要，React 在衬着大型鸠合是机能非常蹩脚，原因是 React 会在每次更新中悉数从新衬着，因而发起将衬着鸠合的部份装为自力的组件衬着

// Bad
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}
// Good
// 当 user.name 更新时，列表不会从新衬着
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return (<ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

尽早绑定要领

在 render() 中绑定的要领应当尽早声明，而不是在衬着时定义

// Bad
render() {
    return <MyWidget onClick={() => { alert(this.state.text) }} />
}
// Good
constructor() {
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    alert(this.state.text);
}

render() {
    return <MyWidget onClick={this.handleClick} />
}

稳定组件禁用更新

关于不需要更新的组件，可以在 shouldComponentUpdate() 中 return false，或许运用 Stateless Component

// Bad
class Logo extends Component {
    render() {
        return <div><img src='logo.png' /></div>;
    }
}
// Good
class Logo extends Component {
    shouldComponentUpdate() {
        return false;
    }

    render() {
        return <div><img src='logo.png' /></div>;
    }
}

// or Stateless Component
const Logo = () => <div><img src='logo.png' /></div>;
参考文章

原文地点: http://t.cn/RIOBUe4

    原文作者：张泽豪
    原文地址: https://segmentfault.com/a/1190000007907359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞