zoukankan      html  css  js  c++  java
  • 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的时候,可以使用缩写语法<></>

  • 相关阅读:
    Bootstrap Div 居中的方法
    JQuery 实现 锚点跳转
    JQuery 获取页面某一元素的位置
    BootStrap 实现导航栏nav透明,nav子元素文字不透明
    bootstrap3中container与container_fluid容器的区别
    常见向量范数和矩阵范数
    leetcode 202. Happy Number
    leetcode 172. Factorial Trailing Zeroes
    leetcode 168. Excel Sheet Column Title 171 Excel Sheet Column Number
    leetcode Two Sum II
  • 原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/13131393.html
Copyright © 2011-2022 走看看