总结使用React做过的一些优化

一、修改css模拟v-show

{!flag && <MyComponent style={{display: 'none'}} />}
{flag && <MyComponent />}

<MyComponent style={{ display: flag ? 'block' : 'none' }} />

二、循环使用key

const todosList = todos.map(item => {
	<li key={item.id}>{item.title}</li>
})

三、使用Fragment减少层级

render(){
	return <>
		<p>hello</p>
		<p>66666</p>
	</>
}

层级太多，有很多的包裹层，调试起来很麻烦

四、JSX中不要定义函数

render () {
    // render函数的this已经被react做了修改
    // 这里的this就是指向当前组件实例
    console.log('父函数中的this指向为：', this)
    // 通过箭头函数的写法 直接沿用父函数的this指向也ok
    return <div onClick={() => this.clickHandler()} style={{fontSize: '30px',color: 'red'}}>
    	这是我第一个类组件
    </div>
  }

// 3. class field写法  最推荐 ！！！！！
class HelloComponent extends React.Component{
  clickHandler = () => {
    console.log(this)
  }
  render () {
    return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
  }
}

why???
react里面的jsx会频繁执行，就会频繁新建函数，有开销，

五、SCU

  • 使用shouldComponentUpdate判断组件是否要更新
  • 使用React.PureComponent （写了这个就不用写scu了）
  • 函数组件使用React.memo

思考:为什么使用 不可变数据？？？
在这里插入图片描述
为什么这里的错误示范，又可行？
就是有人会使用这样的方法，不是所有人基础都这么好，总有人会犯错，但是要想使用scu控制更新逻辑，就要使用不可变数据规范

首先，React会默认让所有的子组件都更新，无论涉及的数据是否变化
shouldComponentUpdate 默认返回true

六、Hooks缓存数据和函数

useMemo
useCallback
在这里插入图片描述

七、其它

异步组件

const OtherComponent = lazy(
	/* webpackChunkName: 'OtherComponent' */
	() => import('./OtherComponent')
)

路由懒加载
SSR - Next.js

使用React遇到的坑

1、自定义组件的名称要大写
2、js关键字冲突（label for改为htmlFor class改为className）
3、jsx数据类型
在这里插入图片描述
4、setState是异步更新的
在这里插入图片描述