React从零开始学习

配置环境

• 安装脚手架工具
  npm install -g create-react-app
• 创建项目
  create-react-app 项目名
• cd项目里面
  npm start 运行项目
  npm run build 生成项目

创建组件

• 组件模板

• 引用组件和使用组件

• 渲染组件（和vue类似） 使用 {this.state.name}

• 绑定属性 class要换成className for要换成htmFor
• 引入图片的方法

• 循环数组 使用 map循环 return 标签出来
• 改变this指向的方法

• 通过this.setState({})改变state数据的值

• 执行方法传值 使用this.方法名.bind(this,数据)

• 获取DOM节点和DOM节点的属性值
  event.target 和 event.target.getAttribute('属性')

获取input框的值

• 使用onChange事件监听input框的变化用 event.target.value获取input框值，然后使用this.getState({})给 state里面 name重新赋值，就做到了类似vue里面双项数据绑定。
• 使用ref获取DOM节点
  let Dom = this.refs.username

键盘事件 onKeyUp和onKeyDown

循环数组

缓存数据，渲染页面

父子组件传值

• 父向子传值
  父组件里面使用子组件的时候自定义一个属性然后等于要传过去的值，子组件接收传过来的值：this.props.title
• 父向子传方法
  父组件里面定一个方法 run ，然后在使用子组件的时候自定义一个属性 title = {this.run}，在子组件里面直接使用 this.props.run就直接执行了这个方法

• 子向父传值

• 父子传值默认值
  defaultProps:父子传值过程中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultprops定义默认值。
  proptypes：验证父组件传值的类型合法性
  

• 使用jsonp请求数据 npm i fetchjsonp --save

组件的生命周期函数

必须记住的：

• 加载的时候：componentWillMount\render\componentDidMount(执行DOM操作)
• 更新的时候：componentWillUpdate\render\componentDidUpdate
• 销毁的时候：componentWillUnmount

React动态路由

• 下载依赖包 npm-router-dom
• 在APP.js引入 import { BrowserRouter as Router,Route,Link } from 'react-router-dom'

• 路由传值
  在link to里面用模板字符串将值传过去

在App.jsx里面配置路由

在传过去的

路由嵌套

• 先在要嵌套的父页面将子页面都引入进来，然后把每个栏目换成要点击的 Link to 的方法，将模块嵌套对应的详细内容丢到对应的模块中去

路由嵌套模块化

• 跟vue一样新建一个独立的jsx文件夹，将需要的路由都引进来，然后使用一个数组接收配置路由，然后暴露

• 在根组件引入路由模块化jsx文件，使用固定父向子传值渲染。

React中使用Antd组件框架

• 安装antd npm install antd --save 或者 yarn add antd
• 在相应的组件按需引入组件