React高级指引(2)

Refs & DOM

Refs提供了一种方式，用于访问在render方法中创建的DOM节点或React元素
创建Refs
使用React.createRef()创建，通过ref属性来获取React元素

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
   render() {
    return <div ref= {this.myRef} />
  }
}

回调Refs
传递一个函数， 此函数接收React组件的实例或DOM 元素作为参数

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }
   render() {
    return (
        <div>
            <input ref= {(input)=>{this.textInput=input}} /> // 普通DOM
            <MyCom ref= {(el) => {this.myRef = el}} />   // React 组件
        </div>  
  }
}

访问Refs

const node = this.myRef.current // 获得当前节点的引用

ref的值取决于节点的类型

• 当ref属性被用于一个普通的HTML元素时，React.createRef()将接收底层DOM元素作为他的
  current属性创建ref
• 当ref属性被用于一个自定义组件时，ref对象将接收该组件已挂载的实例作为他的current
• 不能再函数式组件上使用ref属性
• ref的更新会发生在componentDidMount或componentDidUpdate 生命周期钩子之前

非受控组件

受控组件 input,textarea,select

跟原有的html 标签数据更新不一样，通过value属性绑定值，通过onChange事件监控，使用setState控制state 的更新，从而更新value值
在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件
要编写一个非受控组件，而非为每个状态更新编写事件处理程序，你可以 使用 ref 从 DOM 获取表单值

class NameForm extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)  
  }
  handleSubmit(e){
    e.preventDefault()
    const value = this.input.value // 按dom方式取值
  }
  render(){
    return (
      <form onSubmit={this.handleSubmit}>
        <label> Name: <input type="text" ref={(input)=>this.input = input} /></label>
        <input type="submit" value="submit">
      </form>
    )
  }
}

性能优化

1. 使用生产版本

2. 使用shouldComponentUpdate 生命周期钩子 重新来提升渲染速度

父组件更新时，所有的子组件也要重新渲染，当知道有的子组件不需要更新是，重新改写shouldComponentUpdate：

shouldComponentUpdate(nextProps, nextState) {
  return false;
}

案例

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

在以上代码中，shouldComponentUpdate只检查props.color和state.count的变化。如果这些值没有变化，组件就不会更新。当你的组件变得更加复杂时，你可以使用类似的模式来做一个“浅比较”，用来比较属性和值以判定是否需要更新组件。这种模式十分常见，因此React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent

3. 列表渲染绑定key,避免重复渲染