React

概述

是用来构建用户界面的javascript库

react特点：声明式，组件化，一次学习随处编写。

声明式编程：只提供命令，不提供具体的解决方案。

组件化：jsx将渲染逻辑和ui逻辑结合在了一起

一次学习随处编写：react可以写wen页面可以写app，可以开发vr界面

React开发环境准备

引入.js文件来使用React
通过脚手架工具编码

工程目录简介

README.md 项目介绍

package.json 是node的一个包文件

.gitignore 放入git仓库的时候忽略的文件

node_modules 存放一些第三方的模块

public 公共文档

favicon.ico 网站图标

index.html 网站首页模板

src 存放源代码

index.js 是整个程序的入口文件

组件

什么是组件

React是由组件组成的，组件就是网页中的一部分

图片中的每一部分都是一个组件

React中大写字母开头的都是组件。

函数组件

function Welcome(props){
  return <h1>你好</h1>;
}
function App(){
  return (<div>
          	<Welcome name='111'/>
          </div>);
}

类组件

class Nihao extends React.Component{ //继承了React.Component的类，就是一个React组件
  render{
    this.props; // 存储着props中的值
    return (<div>
            	你好;
            </div>)
  }
}

function App(){
  return (<div>
          	<Nihao name='222'/>
          </div>);
}

一个组件接收一些参数，我们把这些参数叫做props(properties的简写)，然后通过render方法返回需要展示在屏幕上的视图的层次结构。

类组件必须继承React.Compontent也可以写成Compontent，并且必须有render()方法，render函数return的内容就是要显示的内容

组件export default xxx;导出组件之后，其他文件才可以导入。

组件之间的传值

父组件通过属性向子组件传值

子组件想操作父组件的数据，就要通过父组件向子组件传递一个方法，子组件调用方法，简介操作父组件的数据。

单向数据流

父组件可以向子组件传递内容，但是子组件只能使用值，不能改变值

目的是为了开发方便。

React是视图层的框架

JSX

jsx是对JavaScript语法的扩展

要想使用jsx语法，需要引入react

　　import React from 'react'

可以在js文件中直接写html的标签

功能：

嵌入表达式，直接通过{}插入变量和表达式。允许我们在React代码中使用标签的代码结构。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

jsx的注释

{/*这是一条注释*/} 用{}包起来，内部写js注释

单行注释需要如下

{
  // 单行注释
}

React编程注重数据的操作

通过改变数据来改变页面的样式，不需再操作Dom

定义数据

构造函数最先被执行

constructor(props){
  super(props);
  this.state //组件的状态，定义数据需要存入组件的状态
  this.state = {
    inputValue:'',
    list:[]
  }
}

要在js中使用jsx变量可以加一个{}

propTypes与DefaultProps

propTypes是用来做强校验的

引入propType

import PropTypes from 'prop-type'
1. 做校验
TodoItem.propTypes = {

content: Proptypes.String,

deleteItem: PropTypes.func,

index: PropType.number

}

defaultProps 定义默认类型，和值

Greeting.defaultProps = {
  name: 'Stranger'
};

props,state与render

当组件的state或者props发生改变的时候，render方法就会重新执行

当父组件的render()执行时，子组件的所有render()也会被重新运行一次

React中的虚拟DOM

实现React底层的思路

1. state 数据
2. JSX 模板
3. 数据 + 模板 结合，生成真是的DOM，来显示页面内容
4. state 发生改变
5. 数据 + 模板 结合，生成真是的DOM，替换原来的DOM

缺陷：
第一次生成了一个完整的DOM，第二次又生成完整DOM，第二次替换第一次的DOM，非常消耗性能。

改进：
1. state 数据
2. JSX 模板
3. 数据 + 模板 结合，生成真是的DOM，来显示页面内容
4. state 发生改变
5. 数据 + 模板 结合，生成真是的DOM，不直接替换原来的DOM
6. 拿新的DOM和原始DOM比较
7. 找出发生变化的地方
8. 用新的更改的DOM替换老的DOM

性能提升不明显

改进：
1. state 数据
2. JSX 模板
3. 数据 + 模板 结合，生成虚拟的DOM
4. 用虚拟DOM的结构生成真实的DOM（虚拟DOM就是一个JS对象，用来描述真实DOM）
5. state发生了变化
6. 数据 + 模板 生成新的虚拟DOM
7. 比较原始虚拟DOM和新的虚拟DOM的区别。找到区别
8. 直接操作DOM，改变虚拟DOM改变的内容

render函数中，过程

JSX -> creatElement -> 虚拟DOM（js对象）-> 真是的DOM

虚拟DOM的优点

性能提升了
他使得跨端应用得以实现。

虚拟DOM的Diff算法

用来寻找，原虚拟DOM与新的虚拟DOM的区别

同级比较：会比较相同层，从上往下比较，如果上层的DOM改变了，就会将下面全部的转化为新的虚拟DOM，

ref引用，可以用于获取DOM元素,一般情况下不用。

<input 
ref={(input) => {this.input = input}}
/>

React中的生命周期函数

生命周期函数：指在某一时刻，组件会自动调用执行的函数。

组件经历的过程

初始化(Initialization) 定义props和state
挂载(Mounting) //组件第一次被放到页面上时叫挂载
1. componentWillMount 在组件即将被挂载到页面的时刻执行
2. render 渲染页面
3. componentDidMount 组件被挂载到页面之后被执行
更新(Updation) 更新过程如图

componentWillReceiveProps() // 一个组件从父组件接收参数

// 只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
去除组件(Unmount)

当这个组件即将被从页面中剔除的时候执行

charles实现本地数据mock

首先打开打开终端，到桌面，然后 touch 创建一个.json文件

charles中的tool选项中的map local点击。可以增加配置项,选中桌面的json文件，选中 Enable Map Local 和选中的路径。

Redux

Redux = Reducer + Flux(数据层框架)

Redux的工作流程

store是唯一的

只有store可以改变自己的值

Reducer必须是一个纯函数

Redux中间件

所谓中间件指的是Action和Store中间，就是对dispatch方法的封装升级。

posted @ 2020-09-26 20:18 呦啊哈阅读(127) 评论(0) 收藏举报

刷新页面返回顶部

呦啊哈