原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
记一个React.memo引起的bug
目录一般memo用法：问题描述解决方法方案一.使用useRef+forceUpdate方案方案2.使用useCallback总结与PureComponent不同的是PureComponent只是进行浅对比props来决定是否跳过更新数据这个步骤，memo可以自己决定是否更新，但它是一个函数组件而非一个类，但请不要依赖它来阻止渲染，因为这会产生bug。
一般memo用法：
importReactfromreact;
functionMyComponent({props}){
??console.log(111);
??return(
????div{props}/div
??)
functionareEqual(prevProps,nextProps){
??if(prevProps.seconds===nextProps.seconds){
????returntrue
??}else{
????returnfalse
??}
exportdefaultReact.memo(MyComponent,areEqual)
问题描述
我们在处理业务需求时，会用到memo来优化组件的渲染，例如某个组件依赖自身的状态即可完成更新，或仅在props中的某些数据变更时才需要重新渲染，那么我们就可以使用memo包裹住目标组件，这样在props没有变更时，组件不会重新渲染，以此来规避不必要的重复渲染。
下面是我创建的一个公共组件：
typeProps={
?inputDisable:boolean
?//是否一直展示输入框
?inputVisible:boolean
?value:any
?min:number
?max:number
?onChange:(v:number)=void
constInputNumber:FCProps=memo(
?(props:Props)={
??const{inputDisable,max,min,value,inputVisible}=props
??consthandleUpdate=(e:any,num)={
???e.stopPropagation()
???props.onChange(num)
??return(
???ViewclassName={styles.inputNumer}
????{(value!==0||inputVisible)(
?????
??????Image
???????className={styles.btn}
???????src={require(value=min
????????../../assets/images/reduce-no.png
????????:../../assets/images/reduce.png)}
???????e=handleUpdate(e,value-1)}
???????mode=aspectFill
??????/
??????Input
???????value={value}
???????disabled={inputDisable}
???????alwaysEmbed
???????type=number
???????cursor={-1}
???????onInput={e=handleUpdate(e,parseInt(e.detail.valuee.detail.value:0),input)}
??????/
?????/
????)}
????Image
?????className={styles.btn}
?????src={require(max!==-1(value=max||minmax)
??????../../assets/images/plus-no.png
??????:../../assets/images/plus.png)}
?????e=handleUpdate(e,value+1)}
????/
???/View
?(prevProp
文档评论（0）