阅读 847

React框架相关知识

使用脚手架工具create-react-app配置项目环境

  • 在使用前需要确认node有没有安装

安装

npm install -g create-react-app

创建react应用

create-react-app  app-name-demo

在这里由于我在电脑里修改了默认配置的node环境变量,在特定的位置外使用这个命令可能提示不存在,此时可以在前面加npx解决这个问题

npx:是一个包装运行工具,附带npm

  • 主要的依赖:react,react-dom,react-scripts
  • 生成目录结构

  • public是开放的文件夹,在这里存放的文档不会被webpack处理,会直接复制一份,src储存的文档会被webpack编译

  • .gitignore,是git的忽略清单文件,一般我们依赖的模块是不希望上传到github库中的,在这里写入不希望被git管理的文件,git就会忽略他

  • package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号,这里面保存的就是当前环境下依赖的所有包

  • package.json文件只能锁定大版本,即版本号的第一位,不能锁定后面的小版本,这里保存的其实就是react项目依赖的主要几个库包

命令:

  • npm start,运行项目
  • npm run build,打包项目

React项目建设

  • 先清空public,src里的内容
  • 在public中创建index.html,这里存在一个具备id属性的div即可
  • 在src中创建index.js,

App.jsx

这样我们便可以通过npm start 获得hello world了

  • react常用的组件API就是setState,用于修改组件状态。组件状态,其实就是App类的属性,setState接收一个对象

组件生命周期

在创建组件实例并将其插入DOM时,按以下顺序调用这些方法:

  • constructor,接收props,初始化state状态,需要先super(),由于class类的特性,子类的constructor中需要执行super函数,将this指向由指向父类便回指向子类
  • static getDerivedStateFromProps,调用render前调用
  • render,是类组件中唯一需要的方法,调用此方法会返回一个DOM片段
  • componentDidMount,挂载组件后调用,就是渲染成功后调用,此处设置订阅

被废弃的方法:componentWillMount,如果想要使用请使用[UNSAFE_componentWillMount()](https://reactjs.org/docs/react-component.html#unsafe_componentwillmount)

重新渲染组件时,按以下顺序调用这些方法:

  • static getDerivedStateFromProps
  • shouldComponentUpdate,很少使用,也确实没用到过。接收新的props或state时调用,返回布尔值,默认返回true,返回false,render和componentDidUpdate不会被调用
  • render,
  • getSnapshotBeforeUpdate,在最近渲染的输出提交到DOM之前调用,返回的值将作为参数传递给componentDidUpdate,
  • componentDidUpdate,更新发生后立即调用

被废弃的方法:componentWillUpdate,如果想要使用请使用[UNSAFE_componentWillUpdate()](https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate)

               componentWillReceiveProps,如果想要使用请使用[UNSAFE_componentWillReceiveProps()](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)

从DOM中删除组件时,调用以下方法:

  • componentWillUnmount,卸载,这里要取消网络请求或清除在挂载时创建的所有订阅

在渲染期间,生命周期方法或任何子组件的构造函数中发生错误时,将调用这些方法。

  • static getDerivedStateFromError,后代组件发生错误后调用,将错误当做参数传入,返回值来更新状态。
  • componentDidCatch,接收两个参数,参数有两个,error-引发的错误,info-包含有关哪个组件引发错误的信息

React路由,react-router

安装:npm install react-route-dom  --save

       react-router 这个库实现了路由管理的核心功能,react-router-dom 这个库依赖于react-router,但是它拓展了一下在浏览器环境下运行的一些功能。在使用时,我们只需npm i react-router-dom即可,不需要在单独安装react-router

路由的作用:切换显示视图

react-router的API接口

  • BrowserRouter,实质上是一个容器,route的所有操作都应该在这个容器里进行,它会保持UI和URL一致性,就是URL变了的时候它会看看内部有没有对应的组件把它给渲染出来
  • Route,把组件和URL路径给关联起来,path属性设置路径,component设置组件,exact要求路径要匹配一致,strict严格要求路径

       

  • Link,实质上就是a标签,
  • NavLink,与Link作用一致,区别就是NavLink有activeClassName属性能够设置类名,activeStyle设置样式

       

       

  • Switch,switch也是一个容器,用他包裹多个Route,那么这些Route只能同时加载一个
  • Redirect,重定向,<Redirect from='/to' to='/'/>当你访问from时自动跳转to
  • withRouter,是一个高阶组件,可获取history

       render时会把match,location和history传入props

import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
class App extends Component{
    console.log(this.props);  // {match: {…}, location: {…}, history: {…}…}
    render(){
      return (<div className='app'></div>)
    }
}
export default withRouter(App);  
复制代码
  • Prompt,当用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面。

 <Prompt message={'确定离开当前界面吗'} when={true}/>其中message为提示框的内容,when接收一个代码块,当返回true时触发,返回false不触发

redux

redux是独立的专门用于做状态管理的js库

redux的结构

  • redux将项目中的需要被外部管理的状态都放在一个仓库中,所有我们使用redux的时候首先要创建一个这样的仓库store

    const store = createStore(reducer)
    复制代码
  • reducer是一个纯函数,根据老的state和action产生新的state的函数

可以有很多相互独立的reducer函数,只需要把他们统一输出即可

  • combineReducers,redux的API,用于将多个reducer统一输出

  • action是用来创造新的action的函数

    import {editname,editpict,editposting}from './actions-type'
    const namea=(date)=>({type:editname,date})
    const pict=(date)=>({type:editpict,date})
    const postinga=(date)=>({type:editposting,date})
    export {namea,pict,postinga}
    复制代码

       在这里type的值应该是个字符串,我把它放到另一个模块去定义了,直接输入字符串也是可以哒

总结:使用redux应当创建三个模块,一个模块创建store仓库,一个模块提供reducer函数,一个模块提供action创造函数。

redux的使用

  • 当react的某一个组件想要使用store的时候,我们需要将store导入组件

store对象有三个方法:

  • getState,获取数据,返回指定state值
  • dispatch,分发事件,将产生的新actin传入,触发reducer函数产生新的state
  • subscribe,注册监听,当dispatch被调用产生新的action时,会自动调用函数

react-redux

react-redux是专门运用于react项目的状态管理库,他基于redux,使得react的状态管理更加的简洁,符合高内聚,低耦合原则

react-redux有两个API

  • 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。

  • connect,connect是一个高阶组件,使用方式如下

    export default connect(
        state=>({name:state.name,nameword:state.nameword,posting:state.posting})
    ,{postinga}
    )(Posting)
    复制代码

       在后一个括号里填入组件名,产生的新的组件会替代原本的组件,新的组件是容器组件,原本的组件是UI组件

       前一个括号里接收两个参数

  • 第一个参数是一个函数mapStateToProps(),他建立外部state对象与UI组件内部props对象的映射关系。
  • mapDispatchToProps是connect函数的第二个参数,可以是一个函数也可以是一个对象,他的目的是在UI组件中确定哪些操作应当是action,传给store。其实就是将创建action的函数传递给组件,组件用一个参数接收。我只使用过对象的形式。对函数并没有了解