通过继承React.Component创建React组件-5

在React中，V16版本之前有三种方式创建组件（createClass() 被删除了)，之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同，但还是有一些区别，这两种方法在体如下：

本节先了解下用extnds React.Component 的方式创建React组件。

通过继承React.Component创建React组件

以下是一个简单的模板实现：

<script type="text/babel">
   //组件名称要用大写字母开头，因为React在渲染时会区分大小写。
   class Suggest extends React.Component { //自定义组件
   
   		static defaultProps ={//定义组件参数默认值
            color: 'blue',
            text: 'Confirm',
        }; //state是一个属性，所以要写分号结尾
        
       constructor(props) { //定义构造函数，不需要写function关键字
           super(props); //必须要先调用父类的构造函数，否则无法使用this关键字
           this.state = { //定义state，一个属性，React组件的MVVM渲染就是造它来完成的
               //name: "korgs"
           }; 
       }  //方法结尾没有逗号

       render() { //UI渲染方法
           return (
               <> {/*定义JSX最外层元素*/}
               	 <div> 我是显示内容 </div>
               </>
           );
       }
   }

   const container = document.getElementById('app');
   const root = ReactDOM.createRoot(container);
   root.render(<Suggest text="我是参数值"/>); //组件调用
</script>

核心属性

props

props是properties的缩写。props是React用来让组件之间互相联系的一种机制，通俗地说就是方法的参数，组件的props一定来自于默认属性或通过父组件传递而来，在组件中通过this.props来获取。

 render() { //UI渲染
     return (
         <>
             <div>{this.props.text}</div>
         </>
     );
 }

 //调用示例，这个值会覆盖掉组件中static defaultProps定义默认的值
 root.render(<Suggest text="我是参数值"/>); 

props在React是单向数据流，值也是不可变的。当试图改变props的原始值时，React会报出类型错误的警告，一般可以通过复制的方法来操作：

var attribs = Object.assign({}, this.props); // 浅复制
const obj = {...this.state.obj, foo:'bar'};  //浅复制另一种写法（推荐）

propTypes

非必要实现，它会列出所有可传递给组件的参数列表，同时也提供了参数验证功能，但注意，它只会在控制台发出警告，并不会阻断程序运行 ，在V16之后已从React核心库中删除了，所以需要单独安装：
npm i --save-dev prop-types

import PropsTypes from "prop-types"

class Suggest extends React.Component { //组件
    static defaultProps ={
        color: 'blue',
        text: 'Confirm',
    };
}

Suggest.props = { //参数列表
    color: PropsTypes.string.isRequired,
}

export default Suggest

以下是一些常见的用法：

Suggest.propTypes = {
  type: PropTypes.oneOf(['year', 'suggest', 'rating', 'text', 'input']),
  id: PropTypes.string,
  options: PropTypes.array,
  defaultValue: PropTypes.any,
  children: React.PropTypes.oneOfType([
        React.PropTypes.arrayOf(React.PropTypes.node),
        React.PropTypes.node,]
  ),
};

ref

如果需要访问底层DOM节点来执行一些命令式操作时，可以使用ref属性，这个属性值一般要求全局唯一，有两个术语需要先分清：

• 组件：指React组件；
• DOM节点：指组件渲染后的html的Dom节点，通过组件可以拿到DOM节点；

class Focus extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.element.focus()
  }

  render() {
    return (
      <div>
        {/*这里的ref是一个回调函数，组件加载时就会运行*/}
        <input type="text" ref={element => (this.element = element)} />
          <button onClick={this.handleClick}>Focus</button>
      </div>
    )
  }
}

需要特别注意this.element = element中的element指向的组件，而非DOM节点元素，比如上面例子中 this.element = <input type="text" />，这样如果是个复杂组件，还可以访问组件内部的方法。

核心方法

render()

React在组件更新并非每次整个区域全部重新渲染，React会在内部维护一个称为Virual DOM的虚拟树，每次有DOM更新时就会维护此虚拟树结构，然后在需要UI重绘区域采用DOM DIFF算法计算出最小改变，然后选择最佳性能方法，比如append还是insert等方法重绘。

render() { //UI渲染
    return (
        <>
            <div> 我是显示内容 </div>
        </>
    );
}

render() 在实现上一般只返回组件，即使只是一段文本，也建议要用JSX的形式进行包装。

添加样式

内部样式

在组件内编写样式代码，React的style不能用字面量，需要封装成一个对象。然后需要用驼峰式代替原来的-连接符。

render() { //UI渲染
    const styleClass = {
        color:`red',
        background:`url({imgUrl})`,
        height:10 //默认是px
    };

    return (
        <>
            <div style={styleClass}>css</div>
        </>
    );
}

外部样式

正常使用时可以定义一个.css外部样式文件，然后在.js中引入。就可以正常使用了。

import './index.css'

使用classnames插件实现动态样式

npm i --save-dev classnames，这个插件主要用于当需要动态给组件添加样式，减少if语句数量用的，比如，下面代码就实现了按键颜色的切换。

import React from 'react'
import classnames from 'classnames';
import "./all.css"

class ClassNameDemo extends React.Component {

    constructor(props) {
        super(props);

        this.state ={
            isPressed: false,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({isPressed: true})
    }

    render() {
        //使用方式
        const btnClass = classnames({
            'btn':true,
            'btn-pressed': this.state.isPressed,
        })

        return (
            <div>
                <input type="text"/>
                <button className={btnClass} onClick={this.handleClick}>Focus</button>
            </div>
        )
    }

}

export default ClassNameDemo

all.css文件容

.btn{

}
.btn-pressed{
    color: #f3f;
}

事件交互

React把所有事件绑定到结构的最外层，使用一个统一的事件监听器来处理（事件委派机制）。

React基于Virtual DOM实现了一个SyntheticEvent（合成事件层），所有自定义的事件都会接收到一个兼容的SyntheticEvent对象实例，它与原生的Event完全兼容，同样也可以使用stopPropagation()和preventDefault()来中断。

如果需要使用原生Event，可以调用SyntheticEvent.nativeEvent属性。

绑定事件

• 构造器内绑定：这种不能传递参数，好处是性能好，只bind一次即可**（推荐）**

 class Suggest extends React.Component {
     static defaultProps ={  };

     constructor(props) {
         super(props);
          //绑定this到事件中，以实现在自定义事件中的this指向组件，而非事件
         this.handleClick = this.handleClick.bind(this);
     }

     handleClick(e){
         /*一般在此处会调用this.setState({})方法重绘UI界面
         有时为了防止冒泡，会调用 e.preventDefault() 方法*/
         console.log(e.target); //target = <button>Click me!!!</button>
     }

     render() { //UI渲染
         return (
             <>
                 <button onClick={this.handleClick}>Click me!!!</button>
             </>
         );
     }
 }

• 自动绑定：这种可以传递参数，但每次渲染都要重新绑定一次

<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props);
            
            this.state = {
                inputVal: 'male',
            };
        }

        handleInputChange(args, e) {
            console.log(e);
            console.log(args);
        }

        render() {
            const { inputVal} = this.state;
            return (
                <div>
                    <input type="radio" value="male" checked={inputVal === 'male'} onClick= {this.handleInputChange.bind(this,"dd")}/>
                </div>
            );
        }
    }

    const container = document.getElementById('app');
    const root = ReactDOM.createRoot(container);
    root.render(<App text="我是参数值"/>);
</script>

原生事件

一些特殊的事件React并没有实现，所以在必要时还会需要使用js的原生的事件机制，通过ref定义通过refs取得组件DOM，然后在组件加载后绑定原生的侦听事件，代码如下：

  class Suggest extends React.Component { 
      static defaultProps ={  };

      constructor(props) {
          super(props); 
          this.handListener = this.handListener.bind(this);
      }

      componentDidMount(){
          //refs在新版本中已经不建议再用了，而且本身也不建议再使用了
          this.refs.buttonDom.addEventListener('click', this.handListener);
      }

      handListener(e){
          console.log(e.target);
      }

      render() { //UI渲染
          return (
              <>
                  <button ref="buttonDom">Click buttonDom!!!</button>
              </>
          );
      }
  }

事件处理技巧

主要是为了防止绑定的事件太多，在一个地方绑定，然后用swith来分发，示例如下：

class Button extends React.Component {
  constructor(props) {
    super(props)
    this.handleEvent = this.handleEvent.bind(this) //绑定一个事件
  }

  handleEvent(event) {
    switch (event.type) { //根据事件类型分发事件
      case 'click':
        console.log('clicked')
        break

      case 'dblclick':
        console.log('double clicked')
        break

      default:
        console.log('unhandled', event.type)
    }
  }

  render() {
    return (
      <button 
           onClick={this.handleEvent} 
           onDoubleClick={this.handleEvent}>
          Click me!
      </button>
    )
  }
}

远程获取数据

从远程URL获取数据，下例展示了一个从远程获取组件state初始化数据的过程。

 componentDidMount() {
     const _this = this; //指向组件 this，否则在fetch函数中无法引用组件
     fetch('https://api.github.com/users/grearon/gists', {
         method: 'POST',
         mode: 'no-cors',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         },
         // body: JSON.stringify(response)
     }).then(function(response) {
         _this.setState({response}); //重置state
     }).catch( error => console.log(error));
 }

导出和导入

可以直接写成下面这样的代码，因为我们的宗旨是构建小而美的组件，所以下列的代码完全合理：

//Gallery.js
export default function Gallery(){ }
export function Profile(){ }

语法	导出语句	导入语句
默认	export default function Button() {}	import Button from './Button.js';
具名	export function Button() {}	import { Button } from './Button.js';

• 最后的.js可以省略
• 同一文件中，有且仅有一个默认导出，但可以有多个具名导出！

组件调用

添加子元素

除了像下面代码这样调用组件：

   const container = document.getElementById('app');
   const root = ReactDOM.createRoot(container);
   root.render(<Suggest text="我是参数值"/>); //组件调用

还可以在调用时传入子组件，比如组件这样来定义：

return (
    <>
        <div style={styleClass}>{this.props.children}</div>
    </>
);

调用

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(
    <Suggest text="我是参数值">
        <div>ddd</div>
    </Suggest>
);

注意看上例中{this.props.children}这个声明，它表示组件调用时可传递任意数量的子节点到组件中，上例中与<div>ddd</div>对应。

组件间通信

主要就是用到了props和state功能，希望两个组件的状态始终同步更改。要实现这一点，可以将相关 state 从这两个组件上移除，并把 state 放到它们的公共父级，再通过 props 将 state 传递给这两个组件。

父向子

父向子通过this.props属性，注意看下面的代码实现

<script type="text/babel">
   //子组件，定义了一个名为name的属性
   class Child extends React.Component{
       static defaultProps = {
           name:"button"
       }
       render(){
           console.log(this.props);
           return (
               <button>{this.props.name}</button>
           );
       }
   }

   //父组件
   class App extends React.Component{
       constructor(props){
           super(props);
       }
       render(){
           return (
              <>
                {/* 采用props传值给子组件，这时子组件其实会有两个属性值 */}
                <Child {...this.props}/> 
              </>
           );
       }
   }

   const container = document.getElementById('app');
   const root = ReactDOM.createRoot(container);
   root.render(<App name="我是参数值" color="red"/>);
</script>

子向父

子组件控制父组件主要是通过回调函数实现，在父组件中定义回调方法，在子组件中注册事件，然后父组件把回调方法以参数的方式传递给子组件。

<script type="text/babel">
    class Child extends React.Component{
        static defaultProps = {
            name:"button",
        }
        render(){
            return (
                <button onClick={this.props.btnClick}>{this.props.name}</button>
            );
        }
    }

    //父组件
    class App extends React.Component{
        constructor(props){
            super(props);
            
            //定义一个数据，供子组件来修改
            this.state={
                count:0
            }
            this.handleClick = this.handleClick.bind(this);
        }
        //定义回调函数
        handleClick(e) {
            this.setState({count: this.state.count+1})
            console.log(e.target + this.state.count); //~~out: <button>我是参数值</button>0
        }

        render() {
            return (
                <>  {/*回调函数以参数的形式传给子组件*/}
                    <Child btnClick={this.handleClick} {...this.props}/>
                </>
            );
        }
    }

    const container = document.getElementById('app');
    const root = ReactDOM.createRoot(container);
    root.render(<App name="我是参数值" color="red"/>);
</script>

同级间

一般会采用公有父组件的方式，说白了就是向上组装，由父组件统一控制state数据，以实现数据共享的目的，或是再向上包装或封装成一个单独的类对象。

<script type="text/babel">
    //子组件，定义了一个名为name的属性
    class Child extends React.Component{
        static defaultProps = {
            name:"button",
        }
        render(){
            return (
                <button onClick={this.props.btnClick}>{this.props.name}</button>
            );
        }
    }
    //子组件Display
    const Display = ({counter}) => {
        return <h1>{counter}</h1>
    }

    //父组件
    class App extends React.Component{
        constructor(props){
            super(props);

            //定义一个数据，供子组件来修改
            this.state={
                count:0
            }
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick(e) {
            this.setState({count: this.state.count+1})
            console.log(e.target + this.state.count);
        }

        render() {
            return (
                <>
                    <Child btnClick={this.handleClick} {...this.props}/>
                    <Display counter={this.state.count}/>{/*共享state数据*/}
                </>
            );
        }
    }

    const container = document.getElementById('app');
    const root = ReactDOM.createRoot(container);
    root.render(<App name="我是参数值" color="red"/>);
</script>

-------- 以上组件的基本用法全介绍完了，下面是一个常用的实例---------

例子：处理表单数据

表单封装

<script type="text/babel">
    class UserForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                userName:"",
                userAge:0,
            };

            this.handleSubmit = this.handleSubmit.bind(this);
            this.handleContentChange = this.handleContentChange.bind(this);
        }

        handleSubmit(event){
            console.log("提交操作");
            console.log(this.state);
        }
        /*注意这种绑定方法的实现*/
        handleContentChange(event){
            //用这种方法可减少change函数的个数
            this.setState({
                [event.target.name]: event.target.value,
            })
        }

        render() {
            const {color, text} = this.props;
            return (
                <>
                    <form onSubmit={this.handleSubmit}>
                        {/*注意这种绑定方法*/}
                        <label>用户名：</label><input name="userName" type="text"  value={this.state.name} onChange={this.handleContentChange}/>
                        <button  className={`btn btn-${color}`} >提交</button>
                    </form>
                </>
            );
        }
    }

    const container = document.getElementById('app');
    const root = ReactDOM.createRoot(container);
    root.render(<UserForm />);
</script>

使用schema插件自动创建表单

下面的例子只是列出了如何格式化表单，至于jsonschema的详细用法可查看其官网，https://react-jsonschema-form.readthedocs.io/en/v1.8.1/。

安装 npm install --save react-jsonschema-form

class JSONSchemaForm extends React.Component {
    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (values) => {
        console.log(values);
    }

    render() {
        //构建form表单
        const schemaForm = {
            type:"object",
            properties: {
                firstName: {type:"string", default:"Dan"},
                lastName: {type:"string", default:"Abramov"},
            }
        }

        return (
            <Form schema={schemaForm} onSubmit={this.handleSubmit}>
            	<button type="submit">Sub2mit</button>
            </Form>
        )
    }
}

例子：组件优化

剥离操作和展现

就是把UI定义成一个方法、变量、参数 或是单独组件，举例如下：

const ui = [
    <>
        <div> 我是显示内容 </div>
        <div className="Suggest" ref="div01">{this.props.text}</div>
        <div style={styleClass}>css</div>
    </>
]

return (
    ui
);

展开属性...的用法

...用法其实就是一种语法糖，比如：

render() { //UI渲染
    const attr = {
        href:"www.baidu.com",
        alt:"_blank"
    }
    return (
        <>  
            {/* 这种写法其实就是herf={attr.href} alt={attr.alt}*/}
            <a {...attr}>click</a>
        </>
    );
}

删除属性

 // 浅复制
var attribs = Object.assign({}, this.props);
//这段代码等价于： delete attribs.size; 
var {size, ...attribs} = this.props;

Immutable不可变数据集

这个库定义了多个类型工具类，如List, Stack, Map等，其主要是为了函数编程使用
cnpm insatll --save-dev immutable

import {List} from 'immutable';
//因为immutable中的对象和原生js比较相像，所以尽量用命名区分开，以免混淆
let $$list = List([1, 2]);
$$list.push(3, 4);

let $$map = Immutable.Map({a:1, b:2, c:3})

Pure-render处理shouldComponentUpdate

这一节内容可以和Immutable不可变数据集一同应用，因为state变化会自动render()，所以在操作state前最好使用Immutable把一些数据变成不可变的，由人为来判断是否需要改变数据。

也就是在某此时刻最好把state看成是一个不可变对象。
cnpm i --save-dev react-addons-pure-render-mixin

import PureRenderMixin from 'react-addons-pure-render-mixin'

class App extends  React.Component{
    constructor(props) {
        super(props);
        //一个浅复制的应现，代替原来的should实现
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    render(){
        return <div>aaa</div>
    }
}