boss直聘项目相关知识点 React

React手动更新为最新版本16的命令：npm install --save react@next react-dom

react 的基础语法：
react的Hello world
1.import React 是个库，使用react的时候必须在最上面引入，语法为 import React from 'react'
2.class语法新建组件，redurn里面可以直接用
3.render函数的返回值是输出JSX语法，会把JSX转成js执行
react的View层语法
1.JS里直接写html
2.class要写成className
3.变量用{ } 包裹即可

react的API
1.一切皆组件
2.对组件间的通信通过属性传递
3.类实现组件，使用JSX语法

组件之间传递数据
组件之间用props传递数据
1.使用<组件 数据= “值” > 的形式传递
2.组件里使用this.props获取值，this.props是所有属性
3.如果组件只有reder函数，还可以用函数的形式写组件，称为无状态组件
function用来显示只有return的组件，class可以显示比较复杂的组件。

组件内部的state
组件内部通过state管理状态

1. JSX本质上就是js，所以直接用 数组.map渲染列表
   2.Constructor设置为初始状态，记得执行super（props)
   3.start是一个不可变的对象，使用this.start获取
   渲染的时候每个列表都要有一个key,这个key是不重复的，用来做虚拟DOM判断

事件
onClick点击事件
1.JSX里onClick={this.函数名} 来绑定事件
2.this引用的问题，把一个函数传递给别人时候直接执行，在函数内部是拿不到this的，需要在构造函数里用bind来绑定this，或者在点击事件里使用箭头函数的形式
3.通过this.setState修改state，记得是返回新的state，而不是修改值

生命周期
react 组件有若干钩子函数，在组件不同的状态下执行
1）初始化周期
2）组件重新渲染周期
3）组件卸载周期

UI库
antd兼容web和ReactNative原生，两个地方都可以使用
蚂蚁金服出品的UI库

1. 网址：http://beta.mobile.ant.design/
   2)安装命令： npm install antd-mobile@next --save
   3)具体使用方法：
   使用时需要先在文件中引入antd，
   以按钮为例，格式import {Button} from 'antd-mobile' ，
   再引入css文件import 'antd-mobile/dist/antd-mobile.css'，
   将文件中按钮标签替换为大写Button，同时为按钮标签加上 type="primary"。
   这样就可以显示为蓝色按钮，但是比较麻烦，所以可以安装插件，按需加载

4）安装插件
安装按需加载插件，可以不需要重复引入css文件
安装命令： npm install react-app-rewired --save-dev
常用组件，导入后可以直接使用，有几个比较典型，其他的用到时候直接去官网查就可以
1）layou布局组件t
2）表单组件，数据展示组件，选择器等
3）操作组件