React笔记1

2022-12-04 21:08:50

目录

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

上一篇：按示例学python：使用python抓取网页正文


下一篇：js团购倒计时