React总结
发布时间：2020-12-15 20:35:46 所属栏目：百科 来源：网络整理
导读：? React ? ? 概念: 构建用户界面的javaScript库? ? ? ? ? ? ? ?只关注处理UI,不关心路由不处理ajax ? ? 库: ?? ??? ?react.min.js ?- React 的核心库 ? ? ? ? react-dom.min.js ?- 提供与 DOM 相关的功能 ? ? ? ? babel.min.js ?- Babel 可以将 ES6 代码转为
|
?
React
? ? 概念:
构建用户界面的javaScript库?
? ? ? ? ? ? ?只关注处理UI,不关心路由不处理ajax
? ? 库:
?? ???
?react.min.js?- React 的核心库
? ? ? ?
react-dom.min.js?- 提供与 DOM 相关的功能
? ? ? ?
babel.min.js?- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
注:??如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
?
? ?
历史:? 2013.05,由facebook?
? ? ? ? ? ? ?衍生出Reactv Native项目(跨平台的框架)? 服务器端，浏览器端，移动端
? ? 功能
:以构建组件视图为核心
? ? ?特点:
?? ??? ??? ?声明式设计? -data 响应数据? -methods?处理函数?这样写的好处按照开发人员约定好的方式进行开发，所有人写出来的代码就像一个人写的.
?? ??? ??? ??? ??? ??? ??? ?? ? -state? 生命周期钩子函数
?? ??? ?? ? 高效:最大程度减少DOM的操作? ?
?? ??? ??? ??? ??? ??? ?虚拟DOM+DIFF算法
?? ??? ?? ? 灵活:本身只处理UI,与已知的库能够很好的配合
?? ??? ?? ? jsx:(编译语言，允许开发者在将javaScript和html进行混搭)javaScript语法的扩展
?? ??? ?? ? 组件:代码更好得到复用，组件之间是相互独立大队
?? ??? ??? ??? ?? ? 通过与用户的交互，实现不同状态，然后重新渲染UI,让用户界面和数据保持一致
?? ??? ?? ? 单向响应的数据流:实现了单页响应的数据流，从而减少了重复代码
?? ??? ?? ? ??
? ? 优势：组件管理能力是所有框架中最好的
? ? 组件:?? 设置状态? setState:(Object nextState[,function callback])
?? ??? ??? ?? ?替换状态 replaceState
?? ??? ??? ?? ?设置属性? setProps
?? ??? ??? ?? ?替换属性? replaceProps
?? ??? ??? ?? ?强制更新? forceUpdate
?? ??? ??? ?? ?获取DOM节点 findDOMNode
?? ??? ??? ?? ?判断挂载状态? isMounted
?? ?? 依赖:? webpack层面，安装webpack和webpack-cli,写webpack.config.js文件
?? ??? ??? ?? ?babel-loader层面? 我们要--save-dev?安装两个:babel-core和babel-loader
?? ??? ??? ?? ?react层面: react,react-dom (react的源码，先引入后使用)??
? ? ? ? ? ? ? ? ?loader:webpack在构建文件，打包文件的时候，捎带脚做的事??
? cnpm install? webpack webpack-cli? --save
?? ??? ??? ?? ? cnpm install --save-dev babel-core
[email?protected] babel-preset-env babel-preset-react?
?? ??? ??? ?? ? cnpm install --save react react-dom
cnpm install clsssName --save
为什么要使用jsx语法
生命周期函数
? ? 上树阶段
?? ?? ? constructor()?构造函数?写state
?? ?? ? componentWillMount()?将要上树，发出ajax请求
?? ?? ? render()?呈递视图
?? ?? ? componentDidMount()?上树之后，操作DOM
?? ?
? ? 更新阶段
?? ?? ? componentWillReceiveProps(nextProps)
?? ?? ? shouldComponentUpdate(nextProps,nextState)?门神
?? ?? ? componentWillUpdate(nextProps,nextState)? 更新之前做的事
?? ?? ? render()
?? ?? ? componentDidUpdate(prevProps,prevState)?更新之后做的事
?
?? ??下树阶段
?? ?? ? componentWillUnmount()?将要下树
?? ??*? 为了防止死循环，在更新阶段都不需要操作State
? ? Angluar,Vue,React
? ? 相同点:?都是MVVM框架，都能够实现数据变化视图自动变化
? ? 不同点:
?? ??? ??? ?原理不同??? ???? ??? ?
?? ??? ?? ? Angluar:?脏检查，词法分析，进行隐形的视图的更新
?? ??? ?? ? React:setState()?等调用视图函数，配合DIFF算法和Virtual,DOM的变化效率更高(不存在双向数据绑定)
?? ??? ?? ? Vue:数据劫持
?? ??? ?
单页面应用:单页面应用就是类似于桌面的应用，挪用到网页中，用前端技术去实现它
?? ??? ??? ??? ?? 组件化,hash路由，封装
?? ??? ??? ??? ?? ? 子组件调用超类的构造函数，通过extends继承
?
react运行流程
?
? ? npm install -g cnpm --registry=https://
registry.npm.taobao.org
? ? npm config set registry https://
registry.npm.taobao.org
? ? cnpm install? --save-dev webpack webpack-cli
? ??cnpm install --save-dev babel-core
[email?protected] babel-preset-env babel-preset-react
? ? cnpm install react react-dom
? ? 建立文件夹,[project-name]?
?? ?cd进入该文件夹
?创建weppack.config.js
const path = require(‘path‘);
? ? module.exports = {
? ? entry: "./app/main",
? ? output: {
? ? path: path.resolve(__dirname,"dist"),
? ? filename: "bundle.js"
},
module: {
? ? ?rules: [
? ? ? ? {
? ? ? ? ? ? ?test: /.jsx?$/,
? ? ? ? ? ? include: [
? ? ? ? ? ? ? ?path.resolve(__dirname,"app")
? ? ? ? ? ?],
? ? ? ? ? exclude: [
? ? ? ? ? ? ?path.resolve(__dirname,"node_modules")
? ? ? ? ?],
? ? ? ? loader: "babel-loader",
? ? ? ?options: {
? ? ? ? ? presets: ["env","react"]
? ? ?}
}
]
},
? ?watch : true
}
创建文件夹app,建立main.js
?
import React from "react";
import ReactDOM from "react-dom";
?
ReactDOM.render(
<div>
<h1>我是React！哈哈</h1>
</div>
,
document.querySelector("#app-container")
);
?
npx webpack --mode development
jsx语法?
? ? 1.JSX语法如果出现class要用className代替,for用htmlfor代替;
? ? 2.JSX语法必须严格封闭;单标签必须有末尾的反斜杠
? ? 3.JSX遇见数组，会被自动展开 （包括for循环）
?
? ? React中只有两个地方用到了JSX语法
?? ??? ?? ? render()函数中的return和ReactDOM.render()第一个参数
数组中的操作：
?? ?? ? 增加: [...this.state.students,{}]
?? ?? ? 删除: filter
?? ?? ? 更改 map
?
受控组件和非受控组件
? ? ?受控组件: e.target.value? ? onChange和state属性和state进行模拟"双向数据绑定"
? ? ?非受控组件: this.refs.**? ???? ?? ? ref="nameTxt"
? ? 一个组件只有表单元素，才有资格区分是受控的，还是非受控的;
? ??
? ? 每个下辖的子组件，只需要对父组件的"全局"数据负责，而不需要考虑其他兄弟组件做出任何改变
? ? 组件可以相互嵌套
? ? 组件有两种:函数式组件，类组件（重点）??
? ? 定义一个函数，函数的名字是大写的，暗示这是一个组件
数据传递:
? ? 儿子只能用this.props.**接受
? ? 儿子中this.props是只读的，不能修改父亲传入的值
? ? 如果儿子要改，父亲传入一个函数给儿子
? ?要限制一个组件父亲给它传入的参数的类型和个数，此时要用PropTypes
? ? ? ?import PropTypes from "prop-types";
?? ?? ? Compo1.propTypes={
?? ????? ?? ? a:PropTypes.number.isRequired; //number表示数字,isRequired表示不可省略?
???? ??? ?? ? b:PropTypes.func.isRequired;//func表示函数,isRequired表示不可省略
? ? ??}
生命周期:
? ?
上树阶段
?? ??? ??
? constuctor()?构造函数
?? ??? ?? ? componentWillMount()?将要上树
?? ??? ?? ? render()?呈递视图
?? ??? ?? ? componentDidMount()?上树之后，操作DOM
? ?
更新阶段
?? ??? ?? ?
props的改变或者State的改变将触发此阶段
?? ??? ?? ? componentWillReceiveProps(nextProps)? ? 表示父亲传入的新的参数
?? ??? ?? ? shouldComponentUpdate(nextProps,nextState)?门神? (默认 return true? return false)
?? ??? ?? ? componentWillUpdate(nextProps,nextState)?更新之前做的事，此时视图没有变化
?? ??? ?? ? render()
?? ??? ?? ? componentDidUpdate(prevProps,prevState)?更新之后做的事
? ?
下树阶段
?? ??? ?? ?
componentWillUnmount()?将要下树
?
?? ?? ? ? 为了防止生命周期陷入死循环，在5个生命周期阶段都不能操作State
?
? ? ??? ?
?
不管业务逻辑有多大,state,reducer,store只有一组
?
Redux-thunk实现异步
? ? ? ? 需要服务器环境
?? ?? ? express自己写
?? ?? ? JSON-Server
?? ?? ? webpack-dev-Server
?? ??? ?
? ? ?npm install --save-dev redux-logger
?
? ? 利用某个dispatch改变store,言外之意就是action带着服务器上下来的值当做载荷，此时必须使用dispatch的"延时插件"
?? ?
Redux的好处
? ? 将所有数据放到全局，是可预测状态的容器，它里面的数据都是"私有"的，外部要想改变它，必须通过dispatch一个action来改变
JSON-Server可以非常快速的做出:
? ? （1）模拟数据库
? ? ? ?cnpm install -g json-server? ??
?? ?? ? 将App组件拆分为三个组件TodoHd,TodoBd,TodoFt
?
redux-thunk和redux-saga是最火的解决Redux编程中异步问题的解决方案
babel-loader?是7.x?对应的babel 6.x
babel-loader?是8.x?对应的babel 7.x
?
类组件书写的规则
? ? 每一个类组件都是单独的组件，文件的名字和类完全相同!类的名字大写字母开头!
? ? 类必须继承React.Component类，所以要引入react包
?
PropType:?限制一个组件父亲给它传入的参数和类型的个数
store?存储了state数据，并且维持了一套操作state的api
store的功能
?? ??? ?? ? 可以读取数据 store.getStore()
?? ??? ?? ? 允许更新state store.dispatch(action)
?? ??? ?? ? 注册视图 subscribe(listener)
document.getElementByid("box").onclick={
?? ?? ? store.dispatch({"type":"zengjia"})
}
?
?
? ? 安装Redux :
? ? ? ? ? ? ? ? npm install redux --save
? ? ? ? ? ? ? ? npm install react-redux
? ? ? ? ? ? ? ? npm install --save-dev redux-devtools
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |