React细节问题记录

1,修改state:

  *. 不要直接修改state(例:this.state.*** = xxx),应该通过setState来修改state(this.setState({***: xxx}))

  *. constructor是唯一可以给state赋值(其他方式的修改,是一种合并操作,而不是赋值行为)的地方

  *. state的更新可能是异步的,所以尽量不要在更新state的时候依赖之前的state,这是不保险的(可能不准确)。解决方式是给setState方法传递函数参数,这个函数有两个可用参数,第一个参数为上一次修改后的state,第二个参数为这次更新被应用时的props

  *. state的更新是合并形式的,而不是覆盖原有state。

  *. state有两个合并:第一个合并指的是当前更新的state与原有的state合并为最终的state对象。第二个合并,指的是React出于性能考虑,可能会把多个setState调用合并成一个setState调用

2,事件绑定中this问题:

  *. 场景:JSX中绑定事件时(例:render(){ return (<button onClick={this.clickHandle}>click</button>) }),事件回调中使用this的时候,此时的this指向undefined的问题

  *. 解决方式:

        1)第一种方式,通过箭头函数特性,将事件回调写成箭头函数:clickHandle=()=>{*******}或者<button onClick={()=>{this.clickHandle}}>click</button>(后面的方式会有一些性能浪费问题)

        2)第二种方式,通过bind手动为其绑定this:constructor(){this.clickHandle = tihs.clickHandle.bind(this);}

3,多个表单共用一个事件回调的时候,定位当前触发为哪个表单事件:

  *. 通过给每个表单设置name属性,然后在回调函数中使用event.target.name来区分当前回调触发时对应的是哪个表单

4,react中的“插槽”:

  *. react中没有插槽的概念,但是有类似插槽的实现,通过props的形式实现

  *. 两种场景:

    1) 完整"插槽"(类似Vue中的默认插槽):引用某个组件的时候,将这个组件调用下面的所有子元素,通过props.children传递到组件内部,内部组件中直接使用props.children使用这个"插槽"

    2)“具名插槽”(类似Vue中的具名插槽):直接通过props的方式传递,例:<Comp one={<div></div>} two={<p></p>} />,组件内部中引用方式与普通props一样

5,占位根元素:

  *. 场景:当组件由一系列同级元素组成的时候(如:li,tr等),由于组件必须只有一个根元素,这个时候通常会在外层套

      一个div,但是并不是理想的解决方式,形成一个冗余的标签

  *. 解决方案:react提供一个不会被渲染的元素<Fragment></Fragment>,使用Fragment渲染列表的时候,必须加上key。

        如果不需要在Fragment上使用prop的时候,可以使用缩写语法<></>

原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/13131393.html