react学习记录

react三大属性：

state：组件状态

props：组件外部属性

refs：dom引用对象

非受控组件

使用ref="name" 属性

使用this.refs.name获取数据

受控组件

使用value={state}属性赋值

通过onChange回填value值，输入值实时更新至react的state内

react生命周期：

constructor

willMount

render

didMount

willupdate

componentWillReceiveProps

didupdate

willunmount

didunmount

虚拟dom树diff算法：

在内存里首先根据state生成虚拟dom，之后使用diff算法，对比虚拟dom和实际dom的差异，最后把变化的部分进行更新

npm和yarn的区别：

npm为node.js官方的依赖管理工具

yarn为第三方的node依赖管理工具

npm和yarn的主要差别在于，yarn使用了离线缓存，一次安装，后续都可以使用本地的已安装包，且实现了yarn.lock的精确版本控制，npm则每次都需要重新安装依赖库，切版本控制不精确，容易造成不同开发人员本地的依赖库版本不一致，产生错误

使用create-react-app脚手架

使用yarn安装

yarn create react-app my-app

提供本地实时修改刷新预览，开发完成后使用build生成静态文件

react-router:使用window.history对象实现

<BrowserRouter></BrowserRouter>

 

    />
    />

    默认路由

// {...this.props},将props的属性全部按照key=value形式赋值给当前标签

如何定义propTypes，defaultProps，contextTypes等...

import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>;
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;