react性能优化

react性能优化

// useMemo 和 useCallback
import React , { useState ,useMemo , useCallback} from 'react'
import Children from './Children'
const type = 'ccc'

const Test = () => {
const [count, setCount] = useState(1)
const [value, setValue] = useState(0)

/* 
* setValue每次点击增加，都会重新触发此函数导致重新计算 ，
* 导致不必要的性能开销，使用useMemo缓存计算的结果，
* 在函数计算所依赖的值发生变化时，重新计算
*/ 
   // const getCount = () => {
   // console.log('是否重新执行')
   // return type === 'ccc' ? count * 100 : count * 200
// }

// 此时， 若count不发生变化即不会重新触发此函数，节省了性能
const getCount = useMemo(() => {
    console.log('是否重新执行')
    return type === 'ccc' ? count * 100 : count * 200
 }, [count])

const getMethod = useCallback(() =>{
    
},[])

    return (
        <div>
            <div>count的就算结果：getCount()</div>
            <div onClick={() => setValue(value+1)}>好的呀</div>
            <Children getMethod={getMethod} />
        </div>
    )
}

// pureComponent memo

/* 
*  使用 pureComponent 或使用 React.memo 可以避免父组件的任何状态发生变化，就重渲子组件的问题。
*  但如果传入的值发生了改变，子组件（即使使用了 pureComponent，React.memo）依然也会重渲。
*  useCallback 要与 React.memo 配合使用，才能避免父组件状态更新 => 导致传入子组件的函数被重新创建，
*  子组件重新渲染的问题 。
*/
import React , { pureComponent, memo } from 'react'

// class Children extends PureComponent {
//    constructor(props) {
//        super(props);
//        this.state = {  }
//   }
//    render() {
//        console.log('render')
//        return (
//           <div></div>
//        )
//    }
//}

 const Children = (props) => {
 console.log('render')
    return (
        <div>{console.log('render222')}</div>
    )
}

 export default memo(Children)