React 中级用法

最新推荐文章于 2023-12-27 17:27:48 发布

Carlos.Guo

最新推荐文章于 2023-12-27 17:27:48 发布

阅读量535

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/80693201

React 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了React的高级用法，包括组件的最佳实践、Refs的应用场景、PureComponent的使用方法及自动绑定技巧，帮助开发者提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 前言

了解React的初级用法，就有必要知道React的一些中级用法，更加高效合理的处理一些事情和业务，让开发变得更加简单。

React 反向解析

组件CommonButton
- 组件命名首字母要大写，若小写会被认为html标签
- 组件引用
  js <CommonButton size="large" isEnable={false}>
- 组件解析
  js React.createElement( CommonButton, {size: 'large', isEnable:false}, null )
- JSX是React.createElement(component, props, …children)的语法糖

React refs用法

refs使用场景
- 动画处理
- 焦点管理
- 三方插件
注意
- 不要去滥用refs
- render渲染之后才会拥有refs实例
- refs是访问内部组件的真实dom节点
- http://facebook.github.io/react/docs/more-about-refs.html

React PureComponent用法

当我们的组件没有发生变化的时候如何避免重新被渲染，使用PureComponent来实现。

React.Component

定义组件

class CommonButton extends React.Component{     
    constructor(props) {
        super(props);
        this.state = {isEnable:true};
    }
    //控制时候更新
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.color !== nextProps.color) {
          return true;
        }
        if (this.state.isEnable !== nextState.isEnable) {
          return true;
        }
        return false;
    }

    render() {
        return (
          <button
            color={this.props.color}
            disabled={this.state.isEnable}
            onClick={()=>{this.setState({isEnable:!this.state.isEnable})}}
            >
           click
          </button>
        );
    }
}

React.PureComponent

定义组件

    class CommonButton extends React.PureComponent{

        constructor(props) {
            super(props);
            this.state = {isEnable:true};
        }
        //PureComponent避免去控制shouldComponentUpdate函数是否渲染
        render() {
            return (
              <button
                color={this.props.color}
                disabled={this.state.isEnable}
                onClick={()=>{this.setState({isEnable:!this.state.isEnable})}}
                >
               click
              </button>
            );
        }
    }

React 自动绑定

普通用法

    class SayHello extends React.Component {

          constructor(props) {
            super(props);
            //绑定事件
            this.handleClick = this.handleClick.bind(this);
          }

          handleClick() {
            alert("hello");
          }

          render() {
            return (
              <span onClick={this.handleClick}>
                say hello!
              </span>
            );
          }
    }

箭头函数

class SayHello extends React.Component {

      constructor(props) {
        super(props);
      }

      handleClick=()=> {
           alert("hello");
      }

      render() {
        return (
          <span onClick={this.handleClick}>
            say hello!
          </span>
        );
      }
}