react性能优化的方法

react性能优化的6中方法:
1.避免使用内联函数。每次render渲染时,都会创建一个新的函数实例,应该在组件内部创建一个函数,讲事件绑定到函数,这样每次调用render时,就不会创建单独的函数实例。
2.使用react fragement 避免额外标记。用户创建新组件时,每个组件应具有单个父标签,父级不能有两个标签。所以顶部要有一个公共标签,所以经常在组件顶部添加额外标签div,这个div标签充当父标签意外,没有其他作用,这个时候可以使用fragement,它不会向组件引入任何的额外标记,但是可以作为父级标签。
3.使用immutable。在react中使用immutablr能够带来性能优化,主要体现在减少渲染的次数,为了避免重复渲染,会在shouldComponentUpdate()中做对比,当返回true,执行render方法。immutable通过is方法完成对比。
4.懒加载组件。从工程方面考虑,webpack存在代码拆分的能力,可以为应用创建多个包,并在运行时动态加载,减少初始包的大小, 在react中使用Suspense,lazy组件。下图
react性能优化的方法_第1张图片

5.事件绑定方式,从性能考虑,在render方法中使用bind和箭头函数,都会生成新的方法实例,在constructer中欧给使用bind和箭头函数,性能提高
6.服务端渲染,可以使用户更快的看到显然成功的页面,服务端渲染可以起一个node服务,可以使用express。koa等,调用react的renderToString方法,将跟组件渲染成字符串,再输出到相应中
7.组件拆分,合理使用hooks

你可能感兴趣的:(react,前端,react)