react 记录

1. 两种获取dom节点 的方式

import React, {Fragment} from 'react'

class Test extends React.Component {
  constructor(props) {
    super(props);
    // 创建
    this.third = React.createRef();
  }
  componentDidMount(){
    // note: 不同的方式创建ref, 取值方式不同
    console.log(this.second)            // <input value="second">
    console.log(this.third.current);    //  <input value="third">
  }
  render() {
    // 赋值
    return (
      <Fragment>
        <input value="second" ref={(inputRef) => this.second = inputRef} />
        <input value="third" ref={this.third} />
      </Fragment>
      )

  }
}

export default Test

进阶：React.forwardRef

2. setState

在 React 内部，采用的是对象合并的操作，就和我们所熟知的 Object.assign() 执行的结果一样。（ 在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState
都进行合并以后再重新渲染组件。）

setState 还可以接受函数, 这样就直接更新了

this.setState((prevState, props) => ({ count: prevState.count + 1 }));

如果需要在完成更新后操作，可以在第二个参数callback回调中使用：

this.setState({foo: 123}, ()=> {
 console.log(foo);
 // 123
});

3. 子组件可以设置defaultProps默认值

class LikeButton extends Component {
  static defaultProps = {
    likedText: '取消',
   }
  constructor () {
    super()
  }
  }

如果父组件likedText 属性没有传进来，会直接使用 defaultProps 中的默认属性