React重学—基础知识

这是我参与更文挑战的第20天，活动详情查看: 更文挑战

1, react 脚手架工具安装

 npm install -g create-react-app  &&  cnpm install -g create-react-app

2, 创建项目

  create-react-app reactdemo_01
  问题1: 初始化项目报错：
    error eslint@6.8.0: The engine "node" is incompatible with this module. Expected 
    version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.12.0"
  解决方案：这是node版本不兼容导致的，升级node版本可以解决，不升级也可以解决，用下面的命令：
  npx create-react-app my-app  --use-npm
  或者
  npx create-react-app react-template

3, react绑定属性要注意：

1， class 要换成className
2,  for 要换成 htmlFor
3, style  行内样式 <div style={{"color": 'red'}}></div>
4,  其他的属性和以前写法是一样的

4, 写react应该注意

1， 所有模版要被一个根结点包含起来
2， 模版元素不要加引号
3， {} 绑定数据 this.state., var 直接绑定

注意：事件对象，键盘事件，表单事件，ref获取dom节点，React实现类似VUE双数据绑定

事件对象： 再触发DOM上的某一个事件，会产生一个事件对象Event,这个对象包含着所有与事件有关的信息

5, 父子组件传值

组件的相互调用中，

1, 父组件给子组件传值：
   父传值：title={this.state.title} 子获取：this.props.title   
            run = {this.run}                this.props.run
2, 父组件传递整个实例给子组件
      news= {this}             this.props.new.getData
3, 子组件触发本地方法，通过调用这个父组件实例来调用父组件方法

6, 组件传值

父组件主动获取子组件数据

1， 子组件指定ref     ref='header'
2,  父组件通过this.refs.header 获取整个子组件实例

父组件给子组件传值

defaultProps: 父子组件传值中，如果父组件调用子组件的时候不给予传值，则可以在子组件中使用
defaultProps定义默认值
  propTypes: 验证父组件传值类型的合法性
   1， 引入： import PropTypes from 'prop-types'
   2,  类.propTypes = {
      name: PropTypes.string
   }

7, 接口获取

#### react 获取服务器API接口数据
  1, axios   
    (1) 安装 npm install axios  --save
    (2) import axios from axios
    (3) 看文档  npmjs.com
  get请求：http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20

  2, fetch-jsonp
     (1) npm install fetch-jsonp --save
     (2) import FetchJsonp from  'fetch-jsonp'

8, 生命周期函数

  1， 组件加载的时候触发的函数
     constructor , componentWillMount, render, compenentDidMount

  2, 组件数据更新的时候触发的生命周期函数
     shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate

  3, 组件销毁时候触发的
     componentWillUnmount

  4, 当父组件里面传值props改变的时候触发
     componentWillReceiveProps

9, react-router

**, 要配置， 按照react-router
  1, npm install react-router-dom --save
**, 引入到项目
  2, import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
      <Router exact path='/' component={Home}>
  3, exact 表示严格匹配
 
#### 一个页面调整到另一个页面传值

1， get 传值
2，动态路由
 3，localstorage 传值

- 动态路由
  <Route path= '/newscontent/:aid' component={NewsContent} />
    动态路由传值： this.props.match.params
- get 传值
  this.props.location.search  

#### 安装axios

  npm install aixios

10, react 中使用antd

1， 安装： yarn add antd --save
2,  在项目的css 文件中引入 
   @import '~antd/dist/antd.css';
3, 看文档使用
   import {Button} from 'antd'

高级配置， 按需使用css, 引入react-app-rewired 并修改package.json配置

- yarn add react-app-rewired 
- yarn add react-app-rewired customize-cra --save 

修改package.json

  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",

项目根目录创建config-overrides.js文件

module.exports = function override(config, env) { 
  return config;
}

#### 安装yarn add babel-plugin-import

  babel-plugin-import 是一个用于按需加载组件代码和样式的babel插件
修改 config-overrides.js文件内容

const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
     fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
   }),
  );