react常用知识点备忘

一、高阶函数或高阶组件

二、理解什么是配置对象

三、路由的使用

①下载路由react-router-dom
yarn add react-router-dom
npm i react-router-dom --save
②规划路由

③配置路由

四、周期函数的使用

五、事件函数传参数

第一种渲染就直接调用了，不可取

第二种常用的方式

六、父子组件传值

七：传值

// The ES5 way
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  },
  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  },
});
// The ES6+ way   npm install --save prop-types（注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。）
import PropTypes from 'prop-types'
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: PropTypes.bool.isRequired,
    maxLoops: PropTypes.number.isRequired,
    posterFrameSrc:PropTypes.string.isRequired,
    videoSrc:PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

注意调用是这样的
this.props.autoPlay

五、ref三种用法

1. 字符串(已废弃)
2. 回调函数
3. React.createRef() （React16.3提供）

①

1. 字符串

最早的ref用法。

1.dom节点上使用，通过this.refs[refName]来引用真实的dom节点

<input ref="inputRef" /> //this.refs['inputRef']来访问
2.类组件上使用，通过this.refs[refName]来引用组件的实例

<CustomInput ref="comRef" /> //this.refs['comRef']来访问

②

1.dom节点上使用回调函数

<input ref={(input) => {this.textInput = input;}} type="text" />
2.类组件上使用

<CustomInput ref={(input) => {this.textInput = input;}} />

③

class Child extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}