React笔记1

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页面。其他布局页面不用写,因为我们进入首页后,其他页面都是通过页面间跳转的,不需要手动在网址上输入。

posted @ 2019-08-15 11:16  机智的小恐龙  阅读(484)  评论(0编辑  收藏  举报