React笔记1

目录

• 1.react基础:类组件、函数式组件、ES5/ES6继承
• 2.生命周期钩子函数
  • React的生命周期的钩子函数
    • 挂载时 ---------- 初始化阶段
    • 更新时 ---------运行时阶段
    • 卸载时 ---------销毁阶段
    • 错误处理
• 3.什么是JSX
• 4.props和state有什么区别
• 5.路由配置
• 6.自定义封住组件
  • 7.引入移动端react ant-design-mobile UI库‘’
• 7.React 状态管理器
  • 1.Redux:(最基本的写法)
  • 2.redux + react-redux:(把一个组件拆分成了 容器组件 和 UI组件)
  • 3.redux+ react-redux + react-thunk
• 8.利用脚手架创建一个React项目
  • 1.安装脚手架并且创建项目
  • 2.修改配置文件、安装依赖
  • 3.配置入口文件index.js
• 坑点：
  • 1.console.log()打印了2次内容
  • 2.props提供的语法糖，可以将父组件中的所有属性复制给子组件。
  • 3.为啥写重定向和404页面在布局文件中?

1.react基础:类组件、函数式组件、ES5/ES6继承

在创建一个vue项目的时候，

1.在index.js文件中引入react模块，引入在需要的节点所需要的组件
import React from 'react'； // 必须要引入的模块
import ReactDOM from 'react-dom'； // 给某一个DOM节点渲染时用到，它是从react中分离出来的

import App from '@/components/App'; // React的一个组件

// 将虚拟的组件渲染到视图中
// 组件名字必须是大写，如果是小写的话它会认为是html标签，组件的文件名也建议大写
ReactDom.render ( // render是一个钩子函数
	<APP />,
    document.getElementById('root') //表示的是组件放到哪个节点中
)

2.在components文件夹下，编写组件App.jsx
import React from 'react'
/**
在react中开发组件模式:
 > ES6  class类写法   类组件
 > ES6  箭头函数写法   函数式组件   ----无状态组件
*/
// return()   ()内部的代码写的是虚拟Dom，符合jsx语法
//class 类：
class App extends React.Component {
    render () {
        return (
        <div>hello react</div>
        )
    }
}
export default App;

// 函数式组件
const App = () => {
    return (
    <div> hello function</div>
    )
}

如何选择类组件还是函数式组件？
   如果一个组件需要有状态，那么一定不要写函数式组件，函数式组件又会被成为 无状态组件，函数式组件一般会使用为UI组件（只负责渲染视图，数据都来源于父组件）---- 在react16.8的时候要注意一下（有另一种说法）

• ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
• ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

2.生命周期钩子函数

React的生命周期的钩子函数

挂载时 ---------- 初始化阶段

• constructor() -------声明属性
• componentWillMount() --------即将挂载组件
• render() --------初次渲染数据
• componentDidMount() ----------组件挂载完毕，可以在此处进行请求数据

更新时 ---------运行时阶段

• componenttWillReceiveProps(nextProps) --------将接收到组件的数据
• shouldComponentUpdate() ------------- 当state或者props发生改变时，组件是否更新，默认更新，返回值为布尔类型
• componentWillUpdate() ------------组件即将更新
• render() -------------组件更新
• componentDidUpdate() ----------------组件更新完毕，dom操作

卸载时 ---------销毁阶段

• componentWillUnmount() -------------组件销毁---定时器、计数器等

错误处理

• componentDidCatch() --------当react组件数出现错误时执行

常用的react的生命周期钩子函数

constructor() 通过给 this.state 赋值对象来初始化内部 state。为事件处理函数绑定实例

render() 只要是组件就必须有的

componentDidMount() 如果需要请求数据，如果需要DOM操作，实例化操作

componentDidUpdate() 如果需要DOM操作，实例化操作

componentWillUnmount() 如果需要清除定时器，计时器，实例对象

3.什么是JSX

jsx它既不是一个字符串也不是一个HTML，是javascript的语法拓展。jsx可以生成react中的元素，组件就是由元素组成的。
jsx的特性属性，在属性中嵌入javascript代码时，在大括号外面不用加引号
jsx可以防止javascript脚本攻击，因为在渲染的时候，它会先将代码转化成字符串。

4.props和state有什么区别

props是只读的，它用在组件与组件之间
可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。
state可读可写，它用在组件内
它就是数据的状态

1. state是组件自己管理数据，控制自己的状态，可变；
2. props是外部传入的数据参数，不可变；
3. 没有state的叫做无状态组件，有state的叫做有状态组件；
4. 多用props，少用state。也就是多写无状态组件。

5.路由配置

项目目录树：入口找布局，布局找页面，页面找的是组件，组价中可以找子组件

1. 在入口文件中配置路由

   import { BrowserRouter as Router, Switch, Route } from react-router-dom
   import App from '@/layout/App'
   import Detail from '@/layout/Detail'
   
   <Router>
       <Switch>
       	<Route path="/detail" component={ Detail } />
       	<Route path="/" component={ App } />
   	</Switch>
   </Router>
   

2. 在布局文件中配置路由:带参数

   <Switch>
       <Route path="/detail/order" component={ Order }/>
       <Route path="/detail/:id" component={ Detail }/>
   </Switch>
   

3. 在布局文件中配置路由:不带参数

   import Home from '@/view/Home'
   import Kind from '@/view/Kind'
   import Cart from '@/view/Cart'
   import User from '@/view/User'
   import { Route, Switch, NavLink, Redirect } from 'react-router-dom'
   
   <Switch>
         <Route path= '/home' component={ Home } />
         <Route path= '/kind' component={ Kind } />
         <Route path= '/cart' component={ Cart } />
         <Route path= '/user' component={ User } />
         <Redirect to ='/home' />   //重定向
   </Switch>
   
   <NavLink to="/home"><NavLink>  //点击跳转，如果有样式变化用NavLink
    //<Link to={ "/detail/id=" + item.id }><Link>  //没有样式变化的跳转，用Link
   

注：路由的查找是从上到下的，所以path = "/"一定要放在最下面，否则就直接进入path = "/"页面，找不到path="/detail" 页面

布局文件不写具体页面，子组件数据由页面传递，所以子组件中可以用函数式组件

注：详情页跳转时path="/detail/:id"

1. 重定向和404页面

   import NoMatch from '@/view/NoMatch';
   <Redirect exact from = '/' to ='/home' />  //exact表示只有“/”才能重定向到“/home”
      <Route component = { NoMatch } />
   

6.自定义封住组件

1.利用{...this.props}将父组件中的值传递到子组件中，在子组件中｛ ｝使用

2.结合类似vue的插槽完成自定中介部分的内容

封装Header组件

//<Header>组件
import React from 'react'

export default (props) => {
  console.log(props)
  const { left, right, content, onLeft, onRight } = props //从父组件中传过来的值
  return (
    <ul>
      <li onClick = { () => {
        if(props.match.path === '/home') {
          return
        }
        props.history.goBack()
        // onLeft()
      }
      }>
        {left}
      </li>
      <li>{props.children? props.children : content? content : ''}</li>
      <li onClick = { () => {
        onRight()
      }}>{right}</li>
    </ul>
  )
}

//父组件中引用子组件的地方
<Header
          left = "返回"
          content = "搜索"
          right = "扫一扫"
          onLeft = {() => {
            // this.props.history.goBack()
            console.log('返回')
          }}
          onRight = { () => {
            console.log('扫一扫')
          }}
          {...this.props}
          >
            <div className="seach">请输入搜索的内容</div>
          </Header>

7.引入移动端react ant-design-mobile UI库‘’

1. 安装 ant UI库文件

   cnpm i antd-mobile -S
   

2. 在index页面中引入文件(引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise))

   将此段代码直接替换
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   替换为：
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
     <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
     <script>
       if ('addEventListener' in document) {
         document.addEventListener('DOMContentLoaded', function() {
           FastClick.attach(document.body);
         }, false);
       }
       if(!window.Promise) {
         document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
       }
     </script>
   

3. 在config/webpack.config.js中添加UI库的配置。(由于我们用到是react脚手架将config独立出来了，没有babel-plugin-文件)

   npm i babel-plugin-import -D
   

   在第357行，粘贴
   ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
   

4. 基本配置完成，接下来需要哪个组件引入即可

7.React 状态管理器

1.Redux:(最基本的写法)

ReduX并不独属于React，他是js的状态管理容器，在vue中也能用，只是在react中用起来更好，react-redux是属于react的

在store.js页面中 -》 index.js页面引入store监听事件 -》在App页面disptch触发事件改变store中的值

//在store->index.js文件中配置状态管理器
import { creatStore } from 'redux';

const reducer = (state = {
    bannerlist: [],
    prolist:[]
  },action) => {
    const { type, data } = action;
    switch (type) {
      case 'CHANGE_BANNER_LIST': return Object.assign({}, state, {bannerlist:data})
      case 'CHANGE_PRO_LIST': return Object.assign({}, state, { prolist: data })
      default:
        return state;
    }
  }

  const store = creatStore(reducer);

  export default store;

//在index.js入口文件中监听状态管理器的变化
import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'
import store from './store'

function renderFn(){
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  )
}

renderFn();

//  如果检测到状态管理器中有变化触发
store.subscribe(renderFn)

//在需要使用状态管理器数据的页面中（App.jsx）请求数据，改变状态状态管理器中的数据
import React, { Component } from 'react';
import axios from 'axios';
import store from './store'

export default class extends Component {
  componentDidMount () {
    axios.get('https://www.daxunxun.com/banner').then(res => {
      console.log(res.data,'data');
      console.log(store,'store');
      store.dispatch({
        type: 'CHANGE_BANNER_LIST',
        data: res.data
      })
    })
    axios.get('https://www.daxunxun.com/douban').then(res => {
      store.dispatch({
        type: 'CHANGE_PRO_LIST',
        data: res.data
      })
    })
  }
  render () {
    console.log(store.getState(),'getState')
    const { bannerlist, prolist } = store.getState();
    return (
      <div>
        <h1>状态管理器</h1>
        <ul>
          {
            prolist.map(item => (
              <li key = { item.id }>
                { item.title }
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}

2.redux + react-redux:(把一个组件拆分成了 容器组件 和 UI组件)

容器组件只负责业务逻辑的处理，

UI组件只负责数据的渲染

将App.jsx文件拆分成App.jsx和UI.jsx,前者负责写业务逻辑，后者负责渲染数据

//在index.js入口文件中改为
ReactDOM.render(
  <Provider store = { store }>
    <App />
  </Provider>,
  document.getElementById('root')
)

//在App.jsx中写业务 逻辑
import { connect } from 'react-redux'
import axios from 'axios';
import UI from './UI'

// ui组件需要的状态
const mapStateToProps = (state) => {
  return {
    bannerlist: state.bannerlist,
    prolist: state.prolist
  }
}

// ui组件的业务逻辑
const mapDispatchToProps = (dispatch) => {
  return {
    getBannerlist () {
      axios.get('https://www.daxunxun.com/banner').then(res =>{
        dispatch({
          type: 'CHANGE_BANNER_LIST',
          data: res.data
        })
      })
    },
    getProlist () {
      axios.get('https://www.daxunxun.com/douban').then(res => {
        dispatch({
          type: 'CHANGE_BANNER_LIST',
          data: res.data
        })
      })
    }
  }
}

const App = connect(mapStateToProps, mapDispatchToProps)(UI)

export default App;

//在UI组件中渲染数据
import React, { Component } from 'react';

export default class extends Component {
  componentDidMount () {
    this.props.getBannerlist();
    this.props.getProlist();
  }
  render () {
    // console.log(store.getState(),'getState')
    const { bannerlist, prolist } = this.props;
    return (
      <div>
        <h1>状态管理器</h1>
        <ul>
          {
            prolist.map(item => (
              <li key = { item.id }>
                { item.title }
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}

3.redux+ react-redux + react-thunk

将状态管理器拆分到每个页面，然后在store->index文件中配置，单独创建一个action文件，将异步请求数据单拎出来。

// action页面写异步请求
import axios from 'axios';

export default {
  getBannerlist (dispatch) {
    axios.get('https://www.daxunxun.com/banner').then(res => {
      dispatch({
        type: 'CHANGE_BANNER_LIST',
        data: res.data
      })
    })
  }
 ｝

//状态管理器的入口文件
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import home from './home'
import kind from './kind'

const reducer = combineReducers({
  home,
  kind
})
// applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造，使得在发出 Action 和执行 Reducer 之间添加其他功能。
//引入thunk插件后，我们可以在actionCreators内部编写逻辑，处理请求结果。而不只是单纯的返回一个action对象。
const store = createStore(reducer, applyMiddleware(thunk));

export default store;

//状态管理器单个页面
const reducer = (state = {
  bannerlist: [],
  prolist: []
}, action) => {
  const { type, data } = action;
  switch (type) {
    case 'CHANGE_BANNER_LIST':
      return Object.assign({}, state, {bannerlist: data});
    case 'CHANGE_PRO_LIST':
      return Object.assign({}, state, {prolist: data});
    default:
      return state;
  }
}

export default reducer;

8.利用脚手架创建一个React项目

1.安装脚手架并且创建项目

cnpm / npm i create-react-app -g

create-react-app myapp

使用npx直接创建项目

npx是一种在npm中安装工具，也可以被单独的下载使用

在npm 5.2.0 的时候发现会买一送一，自动安装了npx。

npx create-react-app myapp

(npm 的版本必须在5.2.0以上)

2.修改配置文件、安装依赖

运行 npm run eject 抽离配置文件

修改package.json ，配置dev指令

配置src文件夹的别名 @

cnpm i node-sass -D

cnpm i react-router-dom@4 redux react-redux redux-thunk axios antd-mobile -S

在src下面创建main.scss在首页中引入

3.配置入口文件index.js

引入路由文件 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

引入状态管理器文件 import store from './store';

配置文件 import { Provider } from 'react-redux';

全局引入组件库css文件 import 'antd-mobile/dist/antd-mobile.css';

坑点：

1.console.log()打印了2次内容

如果在render中使用console.log,由于react的生命周期中，在其初始化阶段会执行一次render初次渲染，在运行时阶段执行一次render渲染数据，所以会执行2次，也就打印了2次。

2.props提供的语法糖，可以将父组件中的所有属性复制给子组件。

{ ...this.props } 将父组件的路由信息传给组件。 this.props主要包含：history属性、location属性、match属性

3.为啥写重定向和404页面在布局文件中?

因为当我们输入网址的时候，它默认匹配“/”进入布局页面，如果你网址不对不算进入此项目，输入正确的地址后即进入项目，默认“/”进入布局页面，进入布局页面我们把它重定向到“/home”作为首页，如果输入其他匹配不到的就404页面。其他布局页面不用写，因为我们进入首页后，其他页面都是通过页面间跳转的，不需要手动在网址上输入。