[JavaScript知识库]React学习总结...

react引入插件进行跨组件通信，安装依赖包 npm i events

import { EventEmitter } from 'events'
const eventBus = new EventEmitter()
// 挂载阶段
eventBus.addListener(事件名，回调函数)
// 卸载阶段
removeListener(事件名，回调函数)
// 根据需求触发
emit(事件名，参数)
// 回调函数接受emit的参数，回调函数在被触发的组件中定义

受控组件和非受控组件

1. 受控组件使用 change input 事件 evnet.target.value 减少ref的使用

class Demo extends React.Component {
      state = {
        username: '',
        password: ''
      }
      render() {
        return (
          <div>
            <input onChange={this.handleRef} name="username" type="text" />
            <br />
            <input onChange={this.handleRef} name="password" type="password" />
          </div>
        )
      }
      handleRef = (event) => {
        // event.target 触发事件的元素
        //.value .checked
        this.setState({ [event.target.name]: event.target.value })

      }
    }

2. 非受控组件使用 ref来获取元素

class Demo extends React.Component {
      // 3.创建ref
      myRef = React.createRef()
      render() {
        return (
          <div>
            <input ref="input1" onChange={this.handleChange} type="text" />
            <input ref={c => this.input2 = c} onChange={this.handleRef} type="text" />
            <input ref={this.myRef} onChange={this.handleRef} type="text" />  
          </div>
        )
      }
      handleRef = (event) => {
        // 1.字符串ref 尽量避免使用
        console.log(this.refs.input1);
        // 2.函数式ref input2在实例对象身上
        console.log(this.input2);
        console.log(this.refs); // 找不到input2
        // 3.创建ref, 
        console.log(event.target.value);
        console.log(this.myRef.current.value);
        this.myRef.current.focus()
        // 1. this.myRef.current绑定的HTML标签获取的为DOM节点
        // 2. this.myRef.current绑定的class类组件获取的当前组件的实例对象
        // 3. 函数组件不能使用ref，因为没有实例
      }
    }