react 学习

1,安装脚手架

npm install -g create-react-app   // 官方推出的react脚手架工具

2,使用脚手架建立项目

create-react-app demo01

3,进入demo01 npm start直接就可以运行起来了
4,JSX

JSX = javascript + XML 

5,vscode中 react常用插件 Simple React Snippets
6,react 调试
chrome浏览器安装React Developer Tools扩展程序
7,校验传递的值使用PropTypes

import PropTypes from 'prop-types'
Item.propTypes = {
  name: PropTypes.string.isRequired,  // 必须传 并且string类型
  content: PropTypes.string,
  index: PropTypes.number,
  deleteItem: PropTypes.func
}

可以设置默认值
Item.defaultProps = {
  name: '小王'
}

8,ref使用

this.setState({
   ulList: [...this.state.ulList, this.state.inputVal],
   inputVal: ''
})
console.log(this.ul.querySelectorAll('li').length)
// 此处 this.setState是异步的 没等this.setState执行完就已经打印了

改为
this.setState({
  ulList: [...this.state.ulList, this.state.inputVal],
  inputVal: ''
}, _ => {
console.log(this.ul.querySelectorAll('li').length)
})

9，react生命周期