React扩展知识点

    1.refHook

                类组件的ref定义。

                

       

        两种方式一种是直接回调函数设置一个this.***Node节点=event，event为当前ref所在的标签元素，另一种是直接通过React.createRef方法去创建一个myRef在this实例对象中，然后直接ref={this.myRef}

        函数组件和类组件第二种基本上一致

        

        通过React.useRef创建一个ref对象，然后在标签里面添加。

2.fragment（翻译碎片）

        

        

        Fragment标签不会被渲染成真实Dom，而且只有一个属性key值（如果需要被遍历的情况下也可以使用）

        和直接<></>包裹效果一样，但是遍历的时候需要用Fragment的key。

3.context

        

        我们有时候希望祖父组件给孙子组件传参数，如果用props一层层的传很繁琐，这时候需要用到context，相当于一个简便化的redux。

        首先用React.createContext()定义一个Mycontext方法，解构赋值从里面拿出Provider以及Consumer两个方法。

        用Provider包裹子组件，然后传递的参数是value={}这种格式，这样B组件以及B组件的子组件就可以拿到value里面的参数了，但是用之前需要声明接收。

        类组件用static contextType = Mycontext,然后可以通过this.context拿到value对象。

        函数组件用Consumer方法，

        

        用图片里面的Consumer标签包裹然后js表达式里面用参数为value的箭头函数返回我们想要展示的value对象中的数据。

4.PureComponent（组件优化）

        我们在使用组件的时候，在更改一些父组件的状态后，会重新调用所有子组件的render去刷新然后重新渲染组件，这是非常多余的行为，我们通过下面的代码去优化。

        

        我们用shouldComponentUpdata中的参数nextProps与nextState和this.state以及this.props是否相同来判断是否取执行更新组件重新调用render。也可以直接用PureComponent自动封装了判断是否updata重新渲染render。

        一个小重点是，当我们在使用setState的时候，我们必须更新的时候去拿一个新生成的state对象去合并更新，如果我们直接用unshitf或者const obj =

        

        这种图片里面的方式更新，直接去修改了原来的state，但是这时候地址是没有变化的，所以与（{}）效果一样，认为地址没变，返回的还是原来的state。

5.renderProps

        

        

        我们通常在A组件添加子组件直接用闭合标签去添加之后在调用A组件的时候会自动渲染调用B组件的render然后渲染到页面上，现在我们可以用<A><B/></A>这种作为children传过去使用，但是这种无法传A组件里面的props给B组件，所以我们用另一种方法<A/render={(value)=>{return(<B>{value}</B>)}}>，然后传一个B组件作为render函数的返回值，以及可以调用的时候传参数过去。