react学习记录

最新推荐文章于 2024-08-06 16:50:45 发布

小雪Margain

最新推荐文章于 2024-08-06 16:50:45 发布

阅读量493

点赞数

分类专栏：学习文章标签： react

本文链接：https://blog.csdn.net/qq_42862581/article/details/119357656

版权

本文详细记录了React中的关键知识点，包括ref的使用，forwardRef的实践，context的基本用法，Component与PureComponent在性能上的区别，以及memo优化组件渲染的原理。通过实例展示了如何利用这些特性优化React应用的性能。

摘要由CSDN通过智能技术生成

一、 ref使用

class NoFoundPage extends Component {
   
  methodRef: any;
  objRef: any;
  constructor(props) {
   
    super(props);
    this.objRef = React.createRef();
  }
  componentDidMount() {
   
    console.log(this.refs.stringRef.textContent);
    console.log(this.methodRef.textContent);
    console.log(this.objRef.current.textContent);
  }
  render() {
   
    return (
      <div>
        <p ref="stringRef">喜洋洋1</p>
        <p ref={
   e => (this.methodRef = e)}>喜洋洋2</p>
        <p ref={
   this.objRef}>喜洋洋3</p>
      </div>
    );
  }
}

export default NoFoundPage;

结果如下：
在这里插入图片描述

二、forwardRef使用

import React from 'react';

const TargetComponent = React.forwardRef((props, ref) => (
  <input type="text" ref={
   ref} />
));

export default class Comp extends React.Component {
   
  ref: any;
  constructor(props: any) {
   
    super(props);
    this.ref = React.createRef();
  }
  componentDidMount() {
   
    this.ref.current.value = 'please input here';
  }
  render() {
   
    return <TargetComponent ref={
   this.ref} />;
  }
}

结果如下：
在这里插入图片描述

三、 context基本用法

之前版本的childContextType的使用

import {
    Component } from 'react';
import PropTypes from 'prop-types';

// 父组件
class Parent extends Component {
   
  state = {
   
    childContext: '123',
  };
  constructor(props: any) {
   
    super(props);
  }
  getChildContext() {
   
    return {
   
      value: this.state.childContext,