React认识

创建react项目，各个文件目录的说明

---node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具，

--public文件夹中是 index.html存放目录，也就是React根页面的所在地

--src中用于存放js文件，也就是项目开发中的主要区域

--package.json用于记录项目信息，以及外部依赖包的导入信息等

--json文件不能直接打开，需要用到文本编辑器

react是依据es6标准来的，es6标准语法 参照http://es6.ruanyifeng.com/#docs

1、所有的模板要被一个根节点包含起来

2、模板元素不要加引号

3、{}绑定数据

4、定义变量关键字：
    var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
    let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
    const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

5.外部传的变量this.props获取

6,内部定义组件全局无状态参数 this.state，组件可以通过此来传递参数和更新参数值（this.setState{'属性名':'值'}）

7.html元素中的 class属性改用className,for 改用htmlFor ,style属性的值不要引号，采用{}包含

8，数组循环采用list.map(function(val,key){});处理

9.元素属性传参赋值采用{}，例如title={this.state.name}

10，引入 采用 import

11.自定义组件需要继承 React.Component,类似于java类的声明,组件名首字母大写，组件render渲染中的return内容必须是一个div内容

12.数组变量一般通过arrays.map((val,key)=>{return 遍历内容//html元素上需要加上key属性})，或者arrays.forEach((var,index){ //数据遍历处理})，此方法此适合数据的处理，不能直接返回html元素

13.自定义方法申明和bind的使用，如：1.add(){//此方法如果需要使用组件的this，需要调用者使用bind(this)绑定},调用例子如this.add.bind(this)；2.add=function(){//可以直接调用组件的this}或者add=()=>{}

14.带参数方法，通过bind绑定传参，方法名.bind(this,parm1,parm2...),注意this必须要给

15.注释  //，/**/,注意，在渲染方法的输出的html元素内注释如{/**/}

16.获取元素对象，元素上通过定义ref属性（渲染后html上显示是id属性），通过this.refs.ref的属性值获取元素对象；如果是事件绑定，也可以通过event.target获取元素对象

17.双向绑定，model数据绑定组件，组件修改再改变model里的数据，双向绑定当使用value属性赋值，与onChange事件一起绑定

18.请求获取后台数据，使用axios或者fetch获取其他的（服务端需要安装插件(项目目录下安装) npm install axios --save）

19. 组件的生命周期函数  详细参见官网：https://reactjs.org/docs/react-component.html
componentWillMount()---组件加载前监听方法
componentDidMount()--组件加载完成后监听方法
 shouldComponentUpdate()--是否更新state数据重新渲染页面数据方法，默认返回true
componentWillUpdate()--准备更新前监听方法，当shouldComponentUpdate=true时有效
componentDidUpdate()--更新完成后监听方法，当shouldComponentUpdate=true时有效
componentWillUnmount()--组件销毁时监听方法
componentWillReceiveProps()--调用此组件的容器里面动态改变此组件的props传值的时候触发的，此时属性的值还没有改变
render()--渲染操作方法，显示给用户的数据

20.react router路由，一般常用的组件{ BrowserRouter as Router, Route, Link,Redirect } from 'react-router-dom'

--Router是一个机制，相当于一个管理者，它来管理路由，必须在根目录下面引入
--Link的链接地址，指向的路由地址 to属性
--Route 路由，传递参数和绑定组件
--Link和Route必须被Router包含（嵌套的路由里面不需要引入和使用Router组件）
--详细见官网说明

21.antd(ant design)封装了一系列高质量的 React 组件,官网地址：https://ant.design/docs/react/introduce-cn
--安装antd   npm install antd --save    /   yarn add antd     /  cnpm install antd --save
--在项目css文件中引入 Antd的css  @import '~antd/dist/antd.css';
--React中使用Antd高级配置，按需引入css样式，
安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案
yarn add react-app-rewired    /  cnpm install  react-app-rewired --save
修改 package.json
react-scripts 需改为react-app-rewired
"scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test --env=jsdom",
            "eject": "react-app-rewired eject"
      }
在项目根目录创建一个 config-overrides.js 用于修改默认配置
module.exports = function override(config, env) {
          // do stuff with the webpack config...
      return config;
    };
安装babel-plugin-import   babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件
yarn add babel-plugin-import   /  cnpm install babel-plugin-import --save
修改 config-overrides.js
const { injectBabelPlugin } = require('react-app-rewired');

      module.exports = function override(config, env) {
        config = injectBabelPlugin(
                ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
               config,
        );
        return config;
      };
然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 直接引入组件使用就会有对应的css自动生成引入