天道酬勤,学无止境

react

React基础知识点

目标

  • 能够说出React是什么
  • 能够说出React的特点
  • 能够掌握React的基本使用
  • 能够使用React脚手架

什么是React (★★★)

React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来

特点

  • 声明式

你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI

  • 基于组件

组件时React最重要的内容,组件表示页面中的部分内容

  • 学习一次,随处使用

使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用,可以结合react-native angular-ionic、vue-weex

React基本使用

React的安装

npm i react react-dom

  • react 包是核心,提供创建元素,组件等功能
  • react-dom 包提供DOM相关功能

React的使用

  • 引入react和react-dom的两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  • 创建React元素
// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容可以多个 
let title = React.createElement('li', null, 'hellow react');
  • 渲染到页面
// 渲染到页面
ReactDOM.render(title, root)

React脚手架(★★★)

React脚手架意义

  • 脚手架是开发现代Web应用的必备
  • 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
  • 零配置,无需手动配置繁琐的工具即可使用
  • 关注业务,而不是工具配置

使用React脚手架初始化项目

一开始创建脚手架

初始化项目,命令: npx create-react-app my-pro或者 npm init react-app my-app 或者 yarn create react-app my-app 这三种命令方式。

    • npx 目的:提升包内提供的命令行工具的使用体验
    • 原来:先安装脚手架包,再使用这个包中提供的命令
    • 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
    • create-react-app 这个是脚手架名称 不能随意更改
    • my-pro 自己定义的项目名称
  • 启动项目,在项目根目录执行命令: yarn start

yarn命令简介

  • yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
  • yarn具有快速,可靠和安全的特点
  • 初始化新项目:yarn init
  • 安装包: yarn add 包名称
  • 安装项目依赖: yarn

脚手架中使用React

  • 在index.js导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
  • 创建元素
let h1 = React.createElement('h1',null,'我是标题')
  • 渲染到页面
ReactDOM.render(h1,document.getElementById('root'))

JSX的使用

目标

  • 知道什么是JSX
  • 能够使用JSX创建React元素
  • 能够在JSX中使用JavaScript表达式
  • 能够使用JSX的条件渲染和列表渲染
  • 能够给JSX添加样式

概述

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码

优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率

简单入门使用(★★★)

使用步骤

  • 使用JSX语法创建react元素
let h1 = <h1>我是通过JSX创建的元素</h1>
  • 使用ReactDOM来渲染元素
ReactDOM.render(h1,document.getElementById('root'))

为什么在脚手架中可以使用JSX语法

  • JSX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展
  • 需要使用babel编译处理后,才能在浏览器环境中使用
  • create-react-app脚手架中已经默认有该配置,无需手动配置
  • 编译JSX语法的包: @bable/preset-react

注意点

  • React元素的属性名使用驼峰命名法
  • 特殊属性名:class -> className,for -> htmlFor,tabindex -> tabIndex
  • 如果没有子节点的React元素可以用 /> 来结束
  • 推荐:使用 小括号包裹JSX,从而避免JS中自动插入分号报错

JSX语法(★★★)

JSX是来描述页面的结构,我们一般在编写业务逻辑渲染页面的时候,需要涉及到传递值,调用函数,判断条件,循环等,这一些在JSX中都能得到支持

嵌入JS表达式

语法:{JavaScritp表达式}

例子:

let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>
注意点
  • 只要是合法的js表达式都可以进行嵌入
  • JSX自身也是js表达式
  • 注意:js中的对象是一个例外,一般只会出现在style属性中
  • 注意:在{}中不能出现语句

条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

可以发现,写JSX的条件渲染与我们之前编写代码的逻辑是差不多的,根据不同的判断逻辑,返回不同的 JSX结构,然后渲染到页面中

列表渲染

  • 如果需要渲染一组数据,我们应该使用数组的 map () 方法
  • 注意:渲染列表的时候需要添加key属性,key属性的值要保证唯一
  • 原则:map()遍历谁,就给谁添加key属性
  • 注意:尽量避免使用索引号作为key
let arr = [{
    id:1,
    name:'三国演义'
},{
    id:2,
    name:'水浒传'
},{
    id:3,
    name:'西游记'
},{
    id:4,
    name:'红楼梦'
}]
let ul = (<ul>
    {arr.map(item => <li key={item.id}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))

样式处理

行内样式 -style

在style里面我们通过对象的方式传递数据

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

这种方式比较的麻烦,不方便进行阅读,而且还会导致代码比较的繁琐

类名 -className

创建CSS文件编写样式代码

.container {
    text-align: center
}

在js中进行引入,然后设置类名即可

import './css/index.css'

<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

小结

  • JSX是React的核心内容
  • JSX表示在JS代码中写HTML结构,是React声明式的体现
  • 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
  • 推荐使用className的方式给JSX添加样式
  • React完全利用JS语言自身的能力来编写UI,而不是造轮子增强HTML功能

React组件

目标

  • 能够使用函数创建组件
  • 能够使用class创建组件
  • 能够给React元素绑定事件
  • 能够使用state和setState()
  • 能够处理事件中的this指向问题

React组件介绍

  • 组件是React的一等公民,使用React就是在用组件
  • 组件表示页面中的部分功能
  • 组合多个组件实现完整的页面功能
  • 特点:可复用、独立、可组合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvC5uzT1-1618195663054)(images/组件.png)]

组件的创建方式

函数创建组件

  • 函数组件:使用JS的函数创建组件
  • **约定1:**函数名称必须以大写字母开头
  • **约定2:**函数组件必须有返回值,表示该组件的结构
  • 如果返回值为null,表示不渲染任何内容

示例demo

编写函数组件

function Hello() {
  
    return (
        <div>这是第一个函数组件</div>
    )
}

利用ReactDOM.render()进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

类组件(★★★)

  • 使用ES6语法的class创建的组件
  • 约定1:类名称也必须要大写字母开头
  • 约定2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或者属性
  • 约定3:类组件必须提供 render 方法
  • 约定4:render方法中必须要有return返回值

示例demo

创建class类,继承React.Component,在里面提供render方法,在return里面返回内容

class Hello extends React.Component{
    render(){
        return (
            <div>这是第一个类组件</div>
        )
    }
}

通过ReactDOM进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

抽离成单独的JS文件(★★★)

  • 思考:项目中组件多了之后,该如何组织这些组件?
  • 选择一:将所有的组件放在同一个JS文件中
  • 选择二:将每个组件放到单独的JS文件中
  • 组件作为一个独立的个体,一般都会放到一个单独的JS文件中

示例demo

  • 创建Hello.js
  • 在Hello.js 中导入React,创建组件,在Hello.js中导出
import React from 'react'

export default class extends React.Component {
    render(){
        return (
            <div>单独抽离出来的 Hello</div>
        )
    }
}
  • 在index.js中导入Hello组件,渲染到页面
import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))

React事件处理(★★★)

事件绑定

  • React事件绑定语法与DOM事件语法相似
  • 语法:on+事件名称=事件处理函数,比如 onClick = function(){}
  • 注意:React事件采用驼峰命名法

示例demo

export default class extends React.Component {
    clickHandle(e){
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

小结

  • 在React中绑定事件与原生很类似
  • 需要注意点在于,在React绑定事件需要遵循驼峰命名法
  • 类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数的时候需要用到this,代表指向当前的类的引用,在函数中不需要调用this

事件对象

  • 可以通过事件处理函数的参数获取到事件对象
  • React中的事件对象叫做:合成事件
  • 合成事件:兼容所有浏览器,无需担心跨浏览器兼容问题
  • 除兼容所有浏览器外,它还拥有和浏览器原生事件相同的接口,包括 stopPropagation()preventDefault()
  • 如果你想获取到原生事件对象,可以通过 nativeEvent 属性来进行获取

示例demo

export default class extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

支持的事件(有兴趣的课下去研究)

  • Clipboard Events 剪切板事件

    • 事件名 :onCopy onCut onPaste
    • 属性 :DOMDataTransfer clipboardData
  • compositionEvent 复合事件

    • 事件名: onCompositionEnd onCompositionStart onCompositionUpdate
    • 属性: string data
  • Keyboard Events 键盘事件

    • 事件名:onKeyDown onKeyPress onKeyUp
    • 属性: 例如 number keyCode 太多就不一一列举
  • Focus Events 焦点事件 (这些焦点事件在 React DOM 上的所有元素都有效,不只是表单元素)

    • 事件名: onFocus onBlur
    • 属性: DOMEventTarget relatedTarget
  • Form Events 表单事件

    • 事件名: onChange onInput onInvalid onSubmit
  • Mouse Events 鼠标事件

    • 事件名:

      onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
      onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
      onMouseMove onMouseOut onMouseOver onMouseUp
      
  • Pointer Events 指针事件

    • 事件名:

      onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
      onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
      
  • Selection Events 选择事件

    • 事件名:onSelect
  • Touch Events 触摸事件

    • 事件名:onTouchCancel onTouchEnd onTouchMove onTouchStart
  • UI Events UI 事件

    • 事件名: onScroll
  • Wheel Events 滚轮事件

    • 事件名:onWheel

    • 属性:

      number deltaMode
      number deltaX
      number deltaY
      number deltaZ
      
  • Media Events 媒体事件

    • 事件名:

      onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
      onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
      onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
      onTimeUpdate onVolumeChange onWaiting
      
  • Image Events 图像事件

    • 事件名:onLoad onError
  • Animation Events 动画事件

    • 事件名:onAnimationStart onAnimationEnd onAnimationIteration
  • Transition Events 过渡事件

    • 事件名:onTransitionEnd
  • Other Events 其他事件

    • 事件名: onToggle

有状态组件和无状态组件

  • 函数组件又叫做 无状态组件,类组件又叫做 有状态组件
  • 状态(state) 即数据
  • 函数组件没有自己的状态,只负责数据展示
  • 类组件有自己的状态,负责更新UI,让页面动起来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Zh5Z0Kn-1618195663056)(images/状态.png)]

State和SetState(★★★)

state基本使用

  • 状态(state)即数据,是组件内部的私有数据,只能在 组件内部使用
  • state的值是对象,表示一个组件中可以有多个数据
  • 通过this.state来获取状态

示例demo

export default class extends React.Component {
    constructor(){
        super()

        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}

setState() 修改状态

  • 状态是可变的
  • 语法:this.setState({要修改的数据})
  • 注意:不要直接修改state中的值,这是错误的
  • setState() 作用:1.修改 state 2.更新UI
  • 思想:数据驱动视图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kDgqRYcW-1618195663057)(images/修改状态.png)]

示例demo

export default class extends React.Component {
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>
                <div>计数器 :{this.state.count}</div>
                <button onClick={() => {
                     this.setState({
            	 		count: this.state.count+1
           			  })   
                }}>+1</button>
            </div>
        )
    }
}

小结

  • 修改state里面的值我们需要通过 this.setState() 来进行修改
  • React底层会有监听,一旦我们调用了setState导致了数据的变化,就会重新调用一次render方法,重新渲染当前组件

抽取事件处理函数

  • 当我们把上面代码的事件处理程序抽取出来后,会报错,找不到this

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaJfMHIC-1618195663058)(images/this找不到.png)]

原因

  • 在JSX中我们写的事件处理函数可以找到this,原因在于在JSX中我们利用箭头函数,箭头函数是不会绑定this,所以会向外一层去寻找,外层是render方法,在render方法里面的this刚好指向的是当前实例对象

事件绑定this指向

箭头函数

  • 利用箭头函数自身不绑定this的特点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El9O5xBd-1618195663059)(images/箭头函数.png)]

利用bind方法(★★★)

利用原型bind方法是可以更改函数里面this的指向的,所以我们可以在构造中调用bind方法,然后把返回的值赋值给我们的函数即可

class App extends React.Component {
  constructor() {
    super()
	...
    // 通过bind方法改变了当前函数中this的指向
    this.onIncrement = this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() {
    ...
  }

  render() {
    ...
  }
}

class的实例方法(★★★)

  • 利用箭头函数形式的class实例方法
  • 注意:该语法是实验性语法,但是,由于babel的存在可以使用
  // 事件处理程序
  onIncrement = () => {
    console.log('事件处理程序中的this:', this)
    this.setState({
      count: this.state.count + 1
    })
  }

小结

  • 推荐:使用class的实例方法,也是依赖箭头函数不绑定this的原因

React组件

目标

  • 能够知道受控组件是什么
  • 能够写出受控组件
  • 了解非受控组件

表单处理

受控组件(★★★)

  • HTML中的表单元素是可输入的,也就是有自己的可变状态
  • 而React中可变状态通常保存在state中,并且只能通过setState() 方法来修改
  • React讲state与表单元素值value绑定在一起,有state的值来控制表单元素的值
  • 受控组件:值受到react控制的表单元素

在这里插入图片描述

使用步骤

  • 在state中添加一个状态,作为表单元素的value值
  • 给表单元素绑定change事件,将表单元素的值设置为state的值

示例demo

class App extends React.Component {
    constructor(){
        super()
        this.inputChange = this.inputChange.bind(this)
    }
    state = {
        txt : ''
    }
    inputChange(e){
       this.setState({
           txt: e.target.value
       })
    }
    render(){
        console.log(this.state);
        
        return (
            <div>
                {/* 把state的值设置给输入框的value,绑定change事件,这样用户在输入内容的时候调用相应函数,在函数里面把当前设置的值赋值给state,从而达到数据的统一 */}
                <input type="text" value={this.state.txt} onChange={this.inputChange}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

多表单元素优化

  • 问题:每个表单元素都有一个单独的事件处理函数,这样太繁琐
  • 优化:使用一个事件处理程序同时处理多个表单元素
步骤
  • 给表单元素添加name属性(用来区分是哪一个表单),名称与state相同(用来更新数据的)
  • 根据表单内容来获取对应值
  • 在change事件处理程序中通过 [name] 来修改对应的state
示例demo
inputChange(e){
   let target = e.target;
   let value = target.type == 'checkbox' ? target.checked : target.value;
   this.setState({
       [e.target.name]: value
   })
}
<input type="text" value={this.state.txt} name="txt" onChange={this.inputChange}/>
<input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.inputChange}/>

非受控组件 (了解)

  • 说明:借助于ref,使用元素DOM方式获取表单元素值
  • ref的作用:获取DOM或者组件

使用步骤

  • 调用 React.createRef() 方法创建ref对象
  • 将创建好的 ref 对象添加到文本框中
  • 通过ref对象获取到文本框的值
class App extends React.Component {
    constructor(){
        super()
        
        //创建 ref
        this.txtRef = React.createRef()
    }
    // 获取文本框的值
    getTxt =() => {
        console.log(this.txtRef.current.value)
    }
    render(){
        return (
          <div>
            <input type ="text" ref={this.txtRef} />
            <button onClick ={this.getTxt}>获取值</button>
          </div>
        )
    }
}

React组件综合案例(★★★)

需求分析

  • 渲染评论列表(列表渲染)
  • 没有评论数据时渲染:暂无评论(条件渲染)
  • 获取评论信息,包括评论人和评论内容(受控组件)
  • 发表评论,更新评论列表(setState()

在这里插入图片描述

搭建评论列表的模板

  • 结构
import React from 'react'
import ReactDOM from 'react-dom'

/* 
  评论列表案例

  comments: [
    { id: 1, name: 'jack', content: '沙发!!!' },
    { id: 2, name: 'rose', content: '板凳~' },
    { id: 3, name: 'tom', content: '楼主好人' }
  ]
*/

import './index.css'

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
        </div>

        <div className="no-comment">暂无评论,快去评论吧~</div>
        <ul>
          <li>
            <h3>评论人:jack</h3>
            <p>评论内容:沙发!!!</p>
          </li>
        </ul>
      </div>
    )
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
  • 样式
.app {
  width: 300px;
  padding: 10px;
  border: 1px solid #999;
}

.user {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.no-comment {
  text-align: center;
  margin-top: 30px;
}

渲染评论列表

  • 在state中初始化评论列表数据
  state = {
    comments: [
      { id: 1, name: 'jack', content: '沙发!!!' },
      { id: 2, name: 'rose', content: '板凳~' },
      { id: 3, name: 'tom', content: '楼主好人' }
    ]
  }
  • 使用数组的map方法遍历state中的列表数据
  • 给每一个被遍历的li元素添加key属性
  • 在render方法里的ul节点下嵌入表达式
{
  this.state.comments.map(item => {
    return (
       <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.content}</p>
       </li>
    )
  })
}

渲染暂无评论

  • 判断列表数据的长度是否为0

  • 如果为0,则渲染暂无评论

  • 如果不为0,那么渲染列表数据

  • 在jsx中大量写逻辑会导致很臃肿,所以我们可以把条件渲染的逻辑抽取成一个函数

/**
 * 条件渲染,这里抽取出来了,这样在结构中不会很混乱
 */
renderList(){
  if (this.state.comments.length === 0) {
    return (<div className="no-comment">暂无评论,快去评论吧~</div>)
  } else {
    return ( 
      <ul> {
        this.state.comments.map(item => {
          return (
            <li key={item.id}>
              <h3>{item.name}</h3>
              <p>{item.content}</p>
            </li>
          )
        })
      }
      </ul>
    )
  }
}
  • 在render的return方法里面调用这个函数即可
render() {
  return (
    <div>
      ...
      {/* 通过条件渲染来判断是否显示暂无评论 */}
      {this.renderList()}
    </div>
  )
}

获取评论信息

  • 通过受控组件来获取内容
  • 初始化用户名和用户内容的state
userName: '',
userContent: ''
  • 在结构中,把表单元素的value与state进行绑定,还需要绑定name属性和onChange属性
<input className="user" type="text" placeholder="请输入评论人" value={this.state.userName} name="userName" onChange={this.handleForm}/>
<br />
<textarea
  className="content"
  cols="30"
  rows="10"
  placeholder="请输入评论内容"
  value={this.state.userContent}
  name="userContent"
  onChange={this.handleForm}
/>
  • handleFrom函数中利用setState来让数据保持一致
  handleForm = (e) => {
     this.setState({
       [e.target.name] : e.target.value
     })
  }

发表评论

  • 给按钮绑定事件
  • 在事件处理程序中,通过state获取评论信息
  • 将评论信息添加到state中,利用setState来更新页面
  • 添加评论前需要判断用户是否输入内容
  • 添加评论后,需要情况文本框用户输入的值
handleClick = (e) => {
  // 拿到用户输入的内容
  let {userName,userContent} = this.state
  if(userName.trim()==='' || userContent.trim() === ''){
      alert('请输入内容')
      return
  }
  // 利用数组拓展运算符来进行数据的拼接,把用户输入的存放在数组的第一个位置
  let newComments = [{
    id: this.state.comments.length+1,
    name: userName,
    content: userContent
  },...this.state.comments]
  this.setState({
    comments: newComments,
    userName:'',
    userContent: ''
  })
}

React组件进阶

目标

  • 能够使用props接收数据
  • 能够实现父子组件之间的通讯
  • 能够实现兄弟组件之间的通讯
  • 能够给组件添加props校验

组件通讯介绍

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通,这个过程就是组件通讯

组件的props(★★★)

基本使用

  • 组件时封闭的,要接受外部数据应该通过props来实现
  • props的作用:接收传递给组件的数据
  • 传递数据:给组件标签添加属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3AlOrK4-1618195708689)(images/props-设置.png)]

  • 接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据

    • 函数组件获取

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qbLjlPLq-1618195708690)(images/函数组件获取.png)]

    • 类组件获取

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u64458rD-1618195708691)(images/类组件获取.png)]

特点

  • 可以给组件传递任意类型的数据
  • props是只读属性,不能对值进行修改
  • 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props,其他的地方是可以拿到的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UOktMyji-1618195708692)(images/类组件注意点.png)]

组件通讯的三种方式(★★★)

父组件传递数据给子组件

  • 父组件提供要传递的state数据
  • 给子组件标签添加属性,值为state中的数据
  • 子组件中通过props接收父组件中传递的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tXALAfnC-1618195708693)(images/父传子.png)]

子组件传递数据给父组件

  • 利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
  • 父组件提供一个回调函数,用来接收数据
  • 将该函数作为属性的值,传递给子组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHxnPDzs-1618195708694)(images/子传父-父亲设置回调.png)]

  • 子组件通过props调用回调函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cl8dzzFD-1618195708694)(images/子传父-调用回调.png)]

兄弟组件传递

  • 将共享状态(数据)提升到最近的公共父组件中,由公共父组件管理这个状态
  • 这个称为状态提升
  • 公共父组件职责:1. 提供共享状态 2.提供操作共享状态的方法
  • 要通讯的子组件只需要通过props接收状态或操作状态的方法

在这里插入图片描述

示例demo

  • 定义布局结构,一个Counter里面包含两个子组件,一个是计数器的提示,一个是按钮
class Counter extends React.Component {
    render() {
        return (<div>
            <Child1 />
            <Child2 />
        </div>
        )
    }
}
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器:</h1>
        )
    }
}
class Child2 extends React.Component {
    render() {
        return (
            <button>+1</button>
        )
    }
}
  • 在父组件里定义共享状态,把这个状态传递给第一个子组件
class Counter extends React.Component {
    // 提供共享的状态
    state = {
        count: 0
    }
    render() {
        return (<div>
            {/* 把状态提供给第一个子组件 */}
            <Child1 count={this.state.count}/>
            <Child2 />
        </div>
        )
    }
}
  • 在第一个子组件里面就能通过props获取到
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器:{this.props.count}</h1>
        )
    }
}
  • 在父组件中提供共享方法,通过属性传递给第二个子组件,方便第二个子组件来进行调用
    // 提供共享方法
    onIncrement = (res) => {
        // 只要第二个子组件调用了这个函数,就会执行里面代码
        this.setState({
            count: this.state.count + res
        })
    }
    render() {
        return (<div>
            ...
            {/* 把共享方法提供给第二个子组件 */}
            <Child2 onIncrement={this.onIncrement} />
        </div>
        )
    }
  • 在第二个子组件里面通过props来获取到对应函数,然后进行调用
class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用,就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2)
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

Context(★★★)

如果出现层级比较多的情况下(例如:爷爷传递数据给孙子),我们会使用Context来进行传递

作用: 跨组件传递数据

使用步骤

  • 调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CR9LgMsO-1618195708696)(images/创建Context.png)]

  • 使用Provider 组件作为父节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EfC7oCe3-1618195708697)(images/provider.png)]

  • 设置value属性,表示要传递的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1RTnPMs4-1618195708697)(images/设置value属性.png)]

  • 哪一层想要接收数据,就用Consumer进行包裹,在里面回调函数中的参数就是传递过来的值

在这里插入图片描述

小结

  • 如果两个组件相隔层级比较多,可以使用Context实现组件通讯
  • Context提供了两个组件:Provider 和 Consumer
  • Provider组件: 用来提供数据
  • Consumer组件: 用来消费数据

props进阶

children属性

  • children属性: 表示组件标签的子节点,当组件标签有子节点时,props就会有该属性
  • children属性与普通的props一样,值可以使任意值(文本、react元素、组件、甚至是函数)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-63tt7XsA-1618195708699)(images/props-children.png)]

props校验(★★★)

  • 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
  • 如果传入的数据不对,可能会导致报错
  • 关键问题:组件的使用者不知道需要传递什么样的数据
  • props校验:允许在创建组件的时候,指定props的类型、格式等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URRxEPm8-1618195708700)(images/props-校验.png)]

  • 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnohSkz1-1618195708700)(images/props-错误提示.png)]

使用步骤

  • 安装包 prop-types (yarn add prop-types | npm install --save prop-types)
  • 导入prop-types 包
  • 使用组件名.propTypes={} 来给组件的props添加校验规则
  • 校验规则通过PropTypes对象来指定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0hM3iee-1618195708701)(images/propsTypes.png)]

常见的约束规则

  • 创建的类型: array、bool、func、number、object、string
  • React元素类型:element
  • 必填项:isRequired
  • 特定结构的对象: shape({})
  • 更多的约束规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrOZ0lbR-1618195708702)(images/props-约束规则.png)]

props的默认值

  • 场景:分页组件 -> 每页显示条数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBa6J72K-1618195708702)(images/props默认值.png)]

组件生命周期(★★★)

目标

  • 说出组件生命周期对应的钩子函数
  • 钩子函数调用的时机

概述

意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能、分析组件错误原因等

组件的生命周期: 组件从被创建到挂载到页面中运行,再到组件不在时卸载的过程

生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数

钩子函数的作用:为开发人员在不同阶段操作组件提供了方法

生命周期阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuI1b5Xa-1618382394543)(images/生命周期.png)]

创建时(挂载阶段)

  • 执行时机:组件创建时(页面加载时)
  • 执行顺序

在这里插入图片描述

更新时

执行时机:setState()、 forceUpdate()、 组件接收到新的props

说明:以上三者任意一种变化,组件就会重新渲染

执行顺序:

在这里插入图片描述

卸载时

执行时机:组件从页面中消失

作用:用来做清理操作

在这里插入图片描述

不常用的钩子函数

旧版的生命周期钩子函数

在这里插入图片描述

新版完整生命会走棋钩子函数

在这里插入图片描述

getDerivedStateFromProps()
  • getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容
  • 不管原因是什么,都会在每次渲染前触发此方法
shouldComponentUpdate()
  • 根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
  • 当 props 或 state 发生变化时,shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true
getSnapshotBeforeUpdate()
  • getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
  • 此用法并不常见,但它可能出现在 UI 处理中,如需要以特殊方式处理滚动位置的聊天线程等

render-props模式 (★★★)

目标

  • 知道render-props模式有什么作用
  • 能够说出render-props的使用步骤

React组件复用概述

  • 思考:如果两个组件中的部分功能相似或相同,该如何处理?
  • 处理方式:复用相似的功能
  • 复用什么?
    • state
    • 操作state的方法
  • 两种方式:
    • render props模式
    • 高阶组件(HOC)
  • 注意: 这两种方式不是新的API,而是利用React自身特点的编码技巧,演化而成的固定模式

思路分析

  • 思路:将要复用的state和操作state的方法封装到一个组件中

  • 如何拿到该组件中复用的state

    • 在使用组件时,添加一个值为函数的prop,通过函数参数来获取

在这里插入图片描述

  • 如何渲染到任意的UI

    • 使用该函数的返回值作为要渲染的UI内容

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NShmd8Zw-1618382394550)(images/render-props-02.png)]

使用步骤

  • 创建Mouse组件,在组件中提供复用的逻辑代码
  • 将要复用的状态作为 props.render(state)方法的参数,暴露到组件外部
  • 使用props.render() 的返回值作为要渲染的内容

在这里插入图片描述

示例demo

class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
        x: 0,
        y: 0
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
    render(){
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                App
                <Mouse render={mouse => {
                    return <p>X{mouse.x}Y{mouse.y}</p>
                }}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

children代替render属性

  • 注意:并不是该模式叫 render props就必须使用名为render的prop,实际上可以使用任意名称的prop
  • 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做: render props模式
  • 推荐:使用childre代替render属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gz07QuiB-1618382394552)(images/render-props-children模式.png)]

优化代码

  • 推荐给render props模式添加props校验

在这里插入图片描述

高阶组件 (★★★)

目标

  • 知道高阶组件的作用
  • 能够说出高阶的使用步骤

概述

  • 目的:实现状态逻辑复用
  • 采用 包装模式
  • 手机:获取保护功能
  • 手机壳:提供保护功能
  • 高阶组件就相当于手机壳,通过包装组件,增强组件功能

在这里插入图片描述

思路分析

  • 高阶组件(HOC、Higher-Order Component) 是一个函数,接收要包装的组件,返回增强后的组件
    在这里插入图片描述

  • 高阶组件内部创建了一个类组件,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent
    在这里插入图片描述

使用步骤

  • 创建一个函数,名称约定以with开头
  • 指定函数参数,参数应该以大写字母开头
  • 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
  • 在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件
  • 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面

包装函数

// 定义一个函数,在函数内部创建一个相应类组件
function withMouse(WrappedComponent) {
    // 该组件提供复用状态逻辑
    class Mouse extends React.Component {
        state = {
            x: 0,
            y: 0
        }
        // 事件的处理函数
        handleMouseMove = (e) => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        // 当组件挂载的时候进行事件绑定
        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove)
        }
        // 当组件移除时候解绑事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
        render() {
            // 在render函数里面返回传递过来的组件,把当前组件的状态设置进去
            return <WrappedComponent {...this.state} />
        }
    }
    return Mouse
}

哪个组件需要加强,通过调用withMouse这个函数,然后把返回的值设置到父组件中即可

function Position(props) {
    return (
        <p>
            X:{props.x}
            Y:{props.y}
        </p>
    )
}
// 把position 组件来进行包装
let MousePosition = withMouse(Position)

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition></MousePosition>
            </div>
        )
    }
}

设置displayName

  • 使用高阶组件存在的问题:得到两个组件的名称相同
  • 原因:默认情况下,React使用组件名称作为displayName
  • 解决方式:为高阶组件设置displayName,便于调试时区分不同的组件
  • displayName的作用:用于设置调试信息(React Developer Tools信息)
  • 设置方式:

在这里插入图片描述

传递props

  • 问题:如果没有传递props,会导致props丢失问题
  • 解决方式: 渲染WrappedComponent时,将state和props一起传递给组件

在这里插入图片描述

小结

  • 组件通讯是构建React应用必不可少的一环
  • props的灵活性让组件更加强大
  • 状态提升是React组件的常用模式
  • 组件生命周期有助于理解组件的运行过程
  • 钩子函数让开发者可以在特定的时机执行某些功能
  • render props 模式和高阶组件都可以实现组件状态逻辑的复用
  • 组件极简模型: (state,props) => UI

React原理

目标

  • 能够知道setState()更新数据是异步的
  • 能够知道JSX语法的转化过程

setState()说明 (★★★)

更新数据

  • setState()更新数据是异步的
  • 注意:使用该语法,后面的setState不要依赖前面setState的值
  • 多次调用setState,只会触发一次render

推荐语法

  • 推荐:使用 setState((state,props) => {}) 语法

  • 参数state: 表示最新的state

  • 参数props: 表示最新的props

在这里插入图片描述

第二个参数

  • 场景:在状态更新(页面完成重新渲染)后立即执行某个操作
  • 语法:setState(update[,callback])

在这里插入图片描述

JSX语法的转化过程 (★★★)

  • JSX仅仅是createElement() 方法的语法糖(简化语法)
  • JSX语法被 @babel/preset-react 插件编译为createElement() 方法
  • React 元素: 是一个对象,用来描述你希望在屏幕上看到的内容
    在这里插入图片描述

React原理揭秘

目标

  • 能够说出React组件的更新机制
  • 能够对组件进行性能优化
  • 能够说出虚拟DOM和DIff算法

组件更新机制

  • setState() 的两个作用

    • 修改state
    • 更新组件
  • 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)
    在这里插入图片描述

组件性能优化

减轻state

  • 减轻state:只存储跟组件渲染相关的数据(比如:count/ 列表数据 /loading等)
  • 注意:不用做渲染的数据不要放在state中
  • 对于这种需要在多个方法中用到的数据,应该放到this中
    在这里插入图片描述

避免不必要的重新渲染

  • 组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰
  • 问题:子组件没有任何变化时也会重新渲染
  • 如果避免不必要的重新渲染?
  • 解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)
    • 在这个函数中,nextProps和nextState是最新的状态以及属性
  • 作用:这个函数有返回值,如果返回true,代表需要重新渲染,如果返回false,代表不需要重新渲染
  • 触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate => render)
    在这里插入图片描述

随机数案例

需求:随机生成数字,显示在页面,如果生成的数字与当前显示的数字相同,那么就不需要更新UI,反之更新UI。

利用nextState参数来判断当前组件是否需要更新

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等
         if(nextState.number !== this.state.number){
             return true
         }
         return false
    }
    render() {
        return (
            <div>
                随机数:{this.state.number} <br />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}

利用props参数来判断是否需要进行更新

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }

    render() {
        return (
            <div>
                <NumberBox number={this.state.number} />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}
class NumberBox extends React.Component {
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState) {
        // 判断一下当前生成的 值是否与页面的值相等
        if (nextProps.number !== this.props.number) {
            return true
        }
        return false
    }
    render() {
        return (
            <h1>随机数:{this.props.number} </h1>
        )
    }
}

纯组件

作用以及使用

  • 纯组件: PureComponent 与 React.Component 功能相似
  • 区别: PureComponent 内部自动实现了 shouldComponentUpdate钩子,不需要手动比较
  • 原理:纯组件内部通过分别比对前后两次 props和state的值,来决定是否重新渲染组件
    在这里插入图片描述

实现原理

  • 说明:纯组件内部的对比是 shallow compare(浅层对比)

  • 对于值类型来说:比较两个值是否相同
    在这里插入图片描述

  • 引用类型:只比对对象的引用地址是否相同
    在这里插入图片描述

  • 注意:state 或 props 中属性值为引用类型时,应该创建新数据,不要直接修改原数据
    在这里插入图片描述

虚拟DOM和Diff算法

  • React更新视图的思想是:只要state变化就重新渲染视图
  • 特点:思路非常清晰
  • 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的
  • 理想状态:部分更新,只更新变化的地方
  • React运用的核心点就是 虚拟DOM 配合 Diff 算法

虚拟DOM

本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容
在这里插入图片描述

Diff算法

执行过程

  • 初次渲染时,React会根据初始化的state(model),创建一个虚拟DOM对象(树)
  • 根据虚拟DOM生成真正的DOM,渲染到页面
  • 当数据变化后(setState()),会重新根据新的数据,创建新的虚拟DOM对象(树)
  • 与上一次得到的虚拟DOM对象,使用Diff算法比对(找不同),得到需要更新的内容
  • 最终,React只将变化的内容更新(patch)到DOM中,重新渲染到页面
  • 什么是虚拟dom:用js对象来表示页面上dom元素的的样式体现
  • 虚拟dom的作用:高效更新页面,还有就是让react脱离了浏览器的概念
  • 怎么来高效更新页面的:就是在第一次渲染页面的时候生成一份初始的虚拟dom树,然后当数据改变之后,再生成一份虚拟dom树,然后根据新旧dom树进行对比,对比完成之后,把有区别的进行更新
  • diff算法的作用就是:新旧虚拟dom树在对比的时候就是通过diff算法来对比的
  • diff算法又是怎么去对比的:tree diff、component diff、element diff
    在这里插入图片描述

代码演示

  • 组件render()调用后,根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染,render方法调用时意味着Diff算法开始比对了)

  • 示例中,只更新p元素的文本节点内容

  • 初次渲染的DOM对象
    在这里插入图片描述

  • 数据更新之后的虚拟DOM对象
    在这里插入图片描述

小结

  • 工作角度:应用第一,原理第二
  • 原理有助于更好的理解React的自身运行机制
  • setState() 异步更新数据
  • 父组件更新导致子组件更新,纯组件提升性能
  • 思路清晰简单为前提,虚拟DOM和Diff保效率(渲染变化的组件)
  • 虚拟DOM -> state + JSX
  • 虚拟DOM最大的特点是 脱离了浏览器的束缚,也就是意味着只要是能支持js的地方都可以用到react,所以为什么说react是可以进行跨平台的开发

React路由基础

目标

  • 能够说出React路由的作用
  • 能够掌握-react-router-dom的基本使用
  • 能够使用编程式导航跳转路由
  • 能够知道React路由的匹配模式

React路由介绍

现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。

  • 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面)
  • 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
  • 使用React路由简单来说,就是配置路径和组件

路由的基本使用

使用步骤

  • 安装: yarn add react-router-dom

    • 如果没有安装yarn工具的,需要先全局安装一下yarn:npm install -g yarn
  • 导入路由的三个核心组件: Router / Route / Link

    import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
    
  • 使用Router 组件包裹整个应用
    在这里插入图片描述

  • 使用Link组件作为导航菜单(路由入口)
    在这里插入图片描述

  • 使用Route组件配置路由规则和要展示的组件(路由出口)
    在这里插入图片描述

常用组件说明

  • **Router组件:**包裹整个应用,一个React应用只需要使用一次
    • 两种常用的Router: HashRouter和BrowserRouter
    • HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first)
    • 推荐 BrowserRouter:使用H5的history API实现(localhost3000/first)
  • **Link组件:**用于指定导航链接(a标签)
    • 最终Link会编译成a标签,而to属性会被编译成 a标签的href属性
  • **Route组件:**指定路由展示组件相关信息
    • path属性:路由规则,这里需要跟Link组件里面to属性的值一致
    • component属性:展示的组件
    • Route写在哪,渲染出来的组件就在哪

路由的执行过程

  • 当我们点击Link组件的时候,修改了浏览器地址栏中的url

  • React路由监听地址栏url的变化

  • React路由内部遍历所有的Route组件,拿着Route里面path规则与pathname进行匹配
    在这里插入图片描述

  • 当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容

编程式导航

  • **场景:**点击登陆按钮,登陆成功后,通过代码跳转到后台首页,如何实现?
  • **编程式导航:**通过JS代码来实现页面跳转
  • history是React路由提供的,用于获取浏览器历史记录的相关信息,Route组件的内部 通过this.props.component 获取到要渲染的组件, 就会给对应的组件传递history
  • **push(path):**跳转到某个页面,参数path表示要跳转的路径
  • go(n):前进或后退功能,参数n表示前进或后退页面数量
    在这里插入图片描述

默认路由

  • 现在的路由都是通过点击导航菜单后展示的,如果进入页面的时候就主动触发路由呢
  • 默认路由:表示进入页面时就会匹配的路由
  • 默认路由:只需要把path设置为 '/'
    在这里插入图片描述

匹配模式

模糊匹配模式

  • 当Link组件的to属性值为 ‘/login’ 时候,为什么默认路由也被匹配成功?
  • 默认情况下,React路由是模糊匹配模式
  • 模糊匹配规则:只要pathname以path开头就会匹配成功
    在这里插入图片描述

精准匹配

  • 默认路由认可情况下都会展示,如果避免这种问题?
  • 给Route组件添加exact属性,让其变为精准匹配模式
  • 精确匹配:只有当path和pathname完全匹配时才会展示改路由
  1. List item

在这里插入图片描述

小结

  • React路由可以有效的管理多个视图实现 SPA
  • 路由先需要通过安装
  • Router组件包裹整个应用,只需要使用一次
  • Link组件是入口,Route组件是出口
  • 通过props.history实现编程式导航
  • 默认是模糊匹配,添加exact编程精确匹配
  • React路由的一切都是组件,可以像思考组件一样思考路由

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • react-native 插件汇总
    部分自己搜集 部分 来自别的网站 第三方路由插件 react-native-router-flux react-native-scrollable-tab-view 选项卡 测滑动菜单 react-native-ezsidemenu react-native-side-menu react-native-table-component talbe插件 基于react-navigation组件的自定义 head 视图 react-native-carousel 轮播图 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-native-keychain iOSKeyChain管理 react-native-picker 滚轮选择器 react-native-picker-Android 安卓滚轮选择器 react-native-refreshable-listview 可刷新列表 react-native-scrollable-tab-view 可滚动标签 react-native-side-menu 侧边栏 react-native-swiper
  • React vs ReactDOM?(React vs ReactDOM?)
    问题 我有点新反应。 我看到我们必须先导入两件事,即React和ReactDOM ,任何人都可以解释其中的区别。 我正在阅读React文档,但没有说。 回答1 React和ReactDOM直到最近才被拆分为两个不同的库。 在v0.14之前,所有ReactDOM功能都是React的一部分。 这可能会引起混乱,因为任何过时的文档都不会提及React / ReactDOM的区别。 顾名思义,ReactDOM是React和DOM之间的粘合剂。 通常,您只会将其用于一件事情:使用ReactDOM.render()安装。 ReactDOM的另一个有用功能是ReactDOM.findDOMNode() ,您可以使用它来获得对DOM元素的直接访问。 (有些事情您应该在React应用程序中谨慎使用,但是可能有必要。)如果您的应用程序是“同构的”,则还可以在后端代码中使用ReactDOM.renderToString() 。 对于其他所有内容,都有React。 您可以使用React定义和创建生命周期挂钩等元素,即React应用程序的胆量。 React和ReactDOM被分成两个库的原因是由于React Native的到来。 React包含用于Web和移动应用程序的功能。 ReactDOM功能仅在Web应用程序中使用。 [更新:经过进一步的研究,很明显我对React Native的无知正在表现出来。
  • 如何配置 react native android 库以使用 npm 安装的 react-native?(How to configure react native android library to use npm installed react-native?)
    问题 我正在写一个android库,需要调用ReactInstanceManager.onHostResume,我的build.gradle文件内容是: apply plugin: 'com.android.library' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.facebook.react:react-native:+" } 我使用npm install --save react-native-mylib将它安装到示例项目中,然后使用react-native run-android编译项目,导致了一些错误: MyModuleActivity.java:107: error: cannot find symbol mReactInstanceManager.onHostPause(); ^ symbol: method onHostPause() location
  • react-native 第三方库
    react-native 第三方库 React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥 react-native-calendars 🔥🔥🔥🔥 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用Style来配置 🔥🔥 react-native-action-button 支持多种点击事件的Button控件 🔥🔥 react-native-button 另一个Button组件 🔥🔥 ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥 gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥 react-native-activity-view iOS上的分享和action sheets组件 🔥🔥 react-native-app-intro 引导页 🔥🔥 react-native-blur 添加模糊或者毛玻璃效果 🔥🔥🔥 react-native-calendar 日历 🔥 react-native-chart 绘图(折线图,柱状图,扇形图) 🔥🔥🔥 react-native-circular-progress 圆形的显示进度的视图 🔥 react-native-collapsible
  • How to configure react native android library to use npm installed react-native?
    I'm writing an android library, need to call ReactInstanceManager.onHostResume, my build.gradle file content is: apply plugin: 'com.android.library' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.facebook.react:react-native:+" } I installed it into an example project with npm install --save react-native-mylib, and then compile the project with react-native run-android, some errors caused: MyModuleActivity.java:107
  • React Native和React之间有什么区别?(What is the difference between React Native and React?)
    问题 我已经出于好奇而开始学习React ,并且想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。 React和React Native似乎具有相同的格式。 它们的语法完全不同吗? 回答1 ReactJS是一个JavaScript库,它支持前端Web并在服务器上运行,用于构建用户界面和Web应用程序。 它遵循可重用组件的概念。 React Native是一个移动框架,它利用主机上可用的JavaScript引擎,使您可以使用JavaScript构建适用于不同平台(iOS,Android和Windows Mobile)的移动应用程序,从而允许您使用ReactJS来构建可重用的组件并进行通信带有本机组件的进一步说明 两者都遵循JavaScript的JSX语法扩展。 可以在React.createElement编译为React.createElement调用。 JSX深入 两者均由Facebook开源。 回答2 反应: React是用于构建用户界面的声明性,高效且灵活的JavaScript库。 React Native: React Native可让您仅使用JavaScript来构建移动应用程序。 它使用与React相同的设计,使您可以从声明性组件组成丰富的移动UI。 使用React Native,您无需构建“移动Web应用程序”,“
  • React Native常用组件
    本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-carousel 轮播图 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-native-keychain iOSKeyChain管理 react-native-picker 滚轮选择器 react-native-picker-Android 安卓滚轮选择器 react-native-refreshable-listview 可刷新列表 react-native-scrollable-tab-view 可滚动标签 react-native-side-menu 侧边栏 react-native-swiper 轮播 react-native-video 视频播放 react-native-viewpager 分页浏览 react-native-scrollable-tab-view
  • ReactJS:React.render 不是函数,React.createElement 不是函数(ReactJS: React.render is not a function and React.createElement is not a function)
    问题 当我尝试在 React 版本 15.2.0 中使用这两个函数时,我在代码中发现了一个问题,尽管如此,我找到了一个解决方法,但我想知道是否有更好的解决方案。 //app.jsx var React = require('react'); var ThumbnailList = require('./thumbnail-list'); var options = { ThumbNailData: [{ title : 'Download the ISO', number : 32, header : 'Learning React', description: 'The best library for creating fast and dynamic websites.', imageUrl : 'image source' },{ title : 'Download the ISO', number : 64, header : 'Learning Gulp', description: 'Speed your development framework!', imageUrl : 'image source' }], }; var element = React.createElement(ThumbnailList,options); React.render
  • React.Component与React.createClass(React.Component vs React.createClass)
    问题 我很困惑,组件和React类之间的区别是什么? 以及何时在React类上使用组件? 看起来组件是一个类,而createClass创建一个组件。 https://facebook.github.io/react/docs/top-level-api.html React.Component 使用ES6类定义React组件时,这是它们的基类。 有关如何在React中使用ES6类的信息,请参见可重用组件。 有关基类实际提供哪些方法的信息,请参见Component API。 React.createClass 给定规范,创建一个组件类。 组件实现了一个返回单个子对象的render方法。 该孩子可能具有任意深的孩子结构。 使组件与标准原型类不同的一件事是,您无需在它们上调用new。 它们是为您构造后备实例(通过新实例)的便捷包装。 回答1 MyComponent extends React.Component不支持的唯一React.createClass功能MyComponent extends React.Component是mixins。 要执行getInitialState()您可以执行以下操作: class MyComponent extends React.Component { constructor(props, context) { super(props
  • 使用 JSX react/react-in-jsx-scope 时,'React' 必须在范围内吗?('React' must be in scope when using JSX react/react-in-jsx-scope?)
    问题 我是一个 Angular 开发人员并且是 React 的新手,这是一个简单的 React 组件,但不起作用 import react , { Component} from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( <span>hello Tech View</span> ); } } export default TechView; 错误:使用 JSX react/react-in-jsx-scope 时,“React”必须在范围内 回答1 导入行应该是: import React, { Component } from 'react'; 注意 React 的大写 R。 回答2 将以下设置添加到.eslintrc.js / .eslintrc.json以忽略这些错误: rules: { // suppress errors for missing 'import React' in files "react/react-in-jsx-scope": "off", // allow jsx
  • 2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频)
    2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频) 2021 年到来,React 已更新到 17.0.0 版本,我们这套课程跟进最新版本,来入门并学习 React,学习 React Hook 和 React Router,从零开始实战一个全新项目,是国内最新的关于 React 的视频教程 React & React Hook & React Router 基础入门实战视频教程 01 介绍 React & React Hook & React Router 基础入门实战视频教程 02 创建 React 项目并了解项目源码 React & React Hook & React Router 基础入门实战视频教程 03 组件与模板 React & React Hook & React Router 基础入门实战视频教程 04 模板上的动态值 React & React Hook & React Router 基础入门实战视频教程 05 多个组件 React & React Hook & React Router 基础入门实战视频教程 06 添加样式 React & React Hook & React Router 基础入门实战视频教程 07 事件 React & React Hook & React Router
  • 无法解析模块“react-dom”(Cannot resolve module 'react-dom')
    问题 我看过很少有与此类错误相关的帖子。 但无法解决我的问题。 我的 package.json: "react": "~0.14.7", "webpack": "^1.12.13", "react-hot-loader": "^3.0.0-beta.6", . . 我在 webpack 上遇到以下错误: ERROR in ./public/src/main.js Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src @ ./public/src/main.js 19:16-36 但是在我做的时候在 cmd 行 npm -v react-dom 我得到 3.10.10。 react-dom 在那里。 但我想知道为什么它仍然会出现这个错误。 当我通过 npm "npm install react-dom" 安装 react-dom 并运行 webpack 时,出现以下错误: ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react
  • React Native invalid podfile “No such file or directory - ./node_modules/.bin/react-native.”
    In my react native project react-native@60.5 in the iOS dir I get this issue when running a pod install [!] Invalid `Podfile` file: No such file or directory - ./node_modules/.bin/react-native. # from /Users/username/appname/ios/Podfile:44 # ------------------------------------------- # > use_native_modules! # end # ------------------------------------------- This is a React Native fresh init from >@60.0; All worked perfect until I cleared my cache and installed node_modules with the following commands - this may have not been necessary or a good move on my part. watchman watch-del-all && rm
  • 减少 react.min.js 和 react-dom.min.js 的 Browserify 包(Reduce Browserify bundle of react.min.js and react-dom.min.js)
    问题 我想将一些 React 库与 Browserify 和--require它们--require在一起,但被文件大小推迟了。 我使用以下 Browserify 命令: browserify path/to/react.min.js path/to/react-dom.min.js > libs.js 现在,react.min.js 是 21k,react-dom.min.js 是 122k,但是 libs.js 的结果是惊人的 269k。 肯定没有 126k 的 Browserify 开销? 当我查看 libs.js 时,有很多添加的(未缩小的)React 代码。 这是从哪里来的? 回答1 问题是,被Browserify解决require在呼叫(一个或多个) react-dom的react在模块node_modules 。 该模块的package.json将main指定为react.js - 所以你最终得到一个包,除了react.min.js之外还包含非缩小源。 请注意,如果您只捆绑react.min.js : browserify \ --require ./node_modules/react/dist/react.min.js:react \ > bundle-react.js 包大小仅比react.min.js : ls -l node_modules/react
  • React/RCTDefines.h' file not found (RN0.61)
    Performed RN upgrade from RN0.60 to RN0.61. Build failed with iOS, due to the following issue: /react-native/React/Base/RCTBridgeModule.h:10:9: 'React/RCTDefines.h' file not found I am aware of this breaking changes. (React.xcodeproj is deprecated) Try a few things npx react-native-clean-project & re-setup project remove Pods/ & pod install ...running out of idea... Here's how my podfile looks like. pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" pod 'RCTRequired',
  • 未捕获的ReferenceError:未定义React(Uncaught ReferenceError: React is not defined)
    问题 我正在尝试使用本教程使ReactJS与rails一起使用。 我收到此错误: Uncaught ReferenceError: React is not defined 但是我可以在浏览器控制台中访问React对象我还按此处所述添加了public / dist / turbo-react.min.js,并且也按本答案中的描述在application.js中添加了//= require components必需//= require components行,但没有运气。 此外, var React = require('react')给出错误: Uncaught ReferenceError: require is not defined 谁能建议我解决该问题的方法? [编辑1] 供参考的源代码: 这是我的comments.js.jsx文件: var Comment = React.createClass({ render: function () { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.comment} </div> ); } }); var ready = function () { React
  • 我们可以在 react webapp 和 react native app 之间共享代码吗?(Can we share code between react webapp and react native app and is react-native production ready)
    问题 我们有一个用 reactjs 开发的小部件的稳定版本。 我们想开发相同的移动版本。 是使用 react native 开发并在 2 个应用程序之间共享代码更好,还是我们本地开发小部件更好。 请记住,我们在(react 和 android 开发)方面都拥有专业知识,但我们不想在再次开发整个应用程序上投入太多时间。 如果我们选择 react-native,是否有任何工具/资源可以更快地完成这项工作? 在线可用资源: http://jkaufman.io/react-web-native-codesharing/ https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html https://medium.com/@felipecsl/thoughts-on-react-native-from-an-android-engineers-perspective-ea2bea5aa078 干杯!!! 回答1 Instagram、Tesla、AirBnB、Di​​scord、Bloomberg 都有用 React Native 编写的生产应用程序。 我会让你自己决定它是否在你看来可以生产。 虽然 React Native 使您能够在 iOS 和 Android 之间进行重要的代码重用
  • ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 中的错误(ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js)
    问题 在这里反应菜鸟。 尝试克隆并运行 https://github.com/strangebnb/react-airbnb 我克隆。 运行 npm 安装。 然后 webpack 但我得到 ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37 ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src @ ./~/react-tap-event-plugin/src/TapEventPlugin
  • 找不到模块:无法解析'react-native' - React Native(Module not found: Can't resolve 'react-native' - React Native)
    问题 我刚刚开始学习 React Native,想在页面中添加输入字段。 我已经完成了本教程以添加输入字段。 但是每当我运行 React App 时,它都会抛出以下错误。 ./src/Inputs.js Module not found: Can't resolve 'react-native' in 'E:\hybrid\reactDemo\src' 我已经检查过 react-native node-modules 是否存在,然后我才知道 react-native 模块不存在。 我安装它再次运行该应用程序,但它显示相同的错误。 我已经为此花费了 8 多个小时,但无法解决此错误。 我已经尝试了谷歌的所有解决方案,但没有一个对我有用。 注意:我使用的是 Windows PC 更新 1:我正在导入 react-native,如下所示 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native' 更新 2: 这是我的 package.json 文件 { "name": "reactDemo", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.3.1", "react-dom": "^16.3.1"
  • React Router
    目录 一、React Router 1、React Router 的用途 2、React Router 的多元化 二、react-router 1、安装 react-router 2、react-router 的 API 三、react-router-dom(web 端推荐使用) 1、安装 react-router-dom 2、react-router-dom 的三种内置组件 (1)、路由组件 (2)、路由匹配组件 (3)、导航组件 四、react-router-redux 五、react-router-native 六、React Router 学习资源 一、React Router 1、React Router 的用途 保持 UI 与 URL 同步。 2、React Router 的多元化 React Router 提供了多个包: react-router:实现了路由的核心功能。提供了 router 的核心 api。如:Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的 api。react-router-dom:在 react-router 的基础上的扩展,新增了在浏览器运行环境下的一些功能。提供了 BrowserRouter、Route、Link 等 api,可以通过 dom 操作触发事件控制路由。react-router-native: 在