weixin_45677987的博客

1： React 中嵌套路由:class App extends Component { render() { return ( <div className="container"> <div className="jumbotron-fluid" py-4 mt-4> <Header a={1}> </div> <div classN.

1: Vue 和React 的区别 1: Vue 是采用指令结合的方式 vue-loader 实现构建用户界面的渐进式框架, 而React 是采用jsx 的方式构建用户界面的组件化开发。 2: 在渲染用户界面的时候, DOM 操作是非常昂贵的, 但是没有库可以让这些原始操作变得更快。 我们就是做更好的操作, 减少DOM 操作。 和Vue 和 React 都可以使用虚DOM来实现, 并且两者工作一样好。3: 3.1: 都支持服务器端渲染 3.2：都是用虚拟DOM 来实现 .

React 中Redirect 的使用:未完待续....

路由的模糊匹配和严格匹配:<div className="col-3"> <div class="nav flex-column nav-pills p-3 border rounded"> // 标签的内容作为一个特殊的props 传递给组件, key 是children, value 是标签体的内容。 <myNavLink to="/home">Home</myNavLink> <myNavLi.

1: 在浏览器中如何设置不需要依赖缓存？ 在浏览器设置中的 network 中, 有一项Disable cache(while DevTools is open) 当开发者工具打开的时候, 不需要使用缓存 (Disable cache)2: 网络状态是304 使用的是缓存数据, 但是网络状态是200, 表示的请求的数据。 当访问的文件夹不存在时, 就是默认指向public 文件夹下的index.html 文件。 把index.html 文件默认返回。 使用HashRoute.

回顾: NavLink 与封装 Navlink1: NvaLink 可以实现路由链链接的高亮, 通过activeClassName 指定样式;2: 标签体的内容是一个特殊的标签属性;3: 通过this.props.children 可以获取到组件标签的内容。未完待续.........

React 框架中NavLink 的使用: 通过NavLink可以给Link添加类名，从而实现修改样式 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}> 未按待续.....

脚手架配置React Ajax 1: React 本身本身只是关注于界面, 并不包含发送ajax 请求;2: 前端应用需要通过 ajax 请求与后端进行交互(json 数据)3: React 应用中需要集成第三方ajax 库(或者自己封装)常用ajax 库:1: Jquery: 比较重, 如果需要另外引入不建议使用。2: axios 库: 比较轻, 建议使用 1: 封装XmlHttpReqest 对象的ajax 2: 返回promise 风格 3：可以在浏览器端和node .

React 框架中的src 文件:1: App.js 是一个函数定义的组件, 然后render 出去2： App.css 就是跟组件使用的样式3： App.test.js 就是组件的测试文件4： index.js 是入口文件5： index.css 作为全局的一些样式 (在index.js 文件中引入index.css 文件作为全局样式)6: log.svg 可以作为一个动图7: <React.StrictMode> <App /&gt.

1: Raect 脚手架使用: cli： 脚手架: 用来帮助程序员快速创建一个基于xxx库一个模板引擎; 1：包含所有需要的配置(语法检查, jsx 编译, devServe...) 2: 下载好相关依赖 3：可以直接运行一个简单的效果 React 提供了一个用于创建React 脚手架库: create-react-app2: 项目的整体架构为: react(核心库) + webpack + es6(语法) + eslint;3: 使用脚手架开发的项目的特点: 模块化, 组件化,.

React 框架中diffing 算法的理解:1: diffing 算法最小颗粒度是标签 (只可以精确到标签的位置) diffing 算法最小颗粒度是标签 (会一直递归循环遍历下去) 2：只要状态改变就会触发 render 函数 (实时修改状态) (状态修改就会触发render函数);在React/Vue 中 key属性有什么作用？ (index 的内部原理是什么？)3: 为什么办理列表时: key 属性最好不要使用index? 1: 虚拟DOM 中key属性的作用: .

React 框架中getSnapshotBeforeUpdate() {} 函数应用1: <style> .list { width: 200px; height: 150px; background: aqua; overflow: auto; // 加上滚动条 } .news { height: 30px; // 设置每一条高度 }</style><script type="text/babel"> /.

React 中新旧生命周期对比React 新的生命周期函数....未完待续...

1：父组件的render 流程<script type="text/babel"> // 加上babel 语句可以将jsx 语法转化为js 语法 使用类定义组件 class Count eextends React.Component { constructor () { // 构造器 组件挂载之前 // 数据初始化 this.state = { count = 0; } } } // 定义A 组件 c.

1:React 生命周期函数第一条路线: 从 setState() 更新组件触发定义一个容器:<div id="test"></div> <script type="text/babel"> // 定义一个组件 class Count extends React.Component { // constructor 构造器 constructor(props) { super(props) // 初..

1:React 生命周期React 框架中新版本的生命周期比旧版本的生命周期多了两个生命周期, 废弃了三个生命周期。-------------------------------------------------------------定义一个容器:<div id="test"></div><script type="text/babel"> // 定义一个组件 class Count extends React.Component { .

React 生命周期理解:什么是组组件的生命周期:1: 组件从创建到死亡的它会经历一些特定的阶段。2: React 组件中包含一系列钩子函数(既是生命周期回调函数), 会在特定时刻调用。3: 在定义组件的时候, 会在特定的生命周期回调函数中, 做特定的工作。// 准备一个容器<div id="test"></div>// 引入react 核心库<script src="../../js/16.8/react.development.js"></s.

1: 函数柯里化js 中函数柯里化: 最简单的应用就是参数复用。 柯里化函数还有一个作用。如何把一个变量转化为一个对象的key 值; 直接使用: [];----------------------------------------------------------------什么是高阶函数:如果一个函数 满足下边两个条件之一: 就是高阶函数 1：返回值是一个函数 2：接受一个参数是一个函数 常见的高阶函数: Promise 函数(解决异步回调的问题) set.

1：在React 框架中 表单处理 收集表单处理: 受控组件 和 非受控组件----------------------------------------------未完待续....

1： 使用createRef api 创建 ref<script type="text/babel"> // 一定要写 text/babel 就是将jsx 的语法转化js 语法 // 使用 class 关键字创建组件 class Demo React.Component { // React.createaRef() 调用之后返回一个容器, 该容器是可以存储ref 标识节点。 // 该容器是专人专用, 每一个ref 标识都需要使用单独的一个 myR.

React 组件中的ref 属性：1: 通过类创建组件class Person extends React.Component { showData = () => { let input = document.getElementById('input'); alert ("input.value"); // 所以在showData 方法就可以直接使用: this.refs.input 拿到当前DOM的值。 } render() { re

1： 类的基本知识// 创建一个Person 类class Person { // 构造方法 constructor { }}let p = new Person (); 构造方法就是当实例化这个类的时候, 会自动调用这个方法。构造方法就是当我们实例化是各这个类的时候, 会自动调用这个构造函数。父类有一个构造方法, 子类也有一个构造方法:当父类重写了子类的构造方法: 必须要使用super 关键字。子类重写父类构造方法, 一定要使用 super() 关键字。supe

1：React 函数式组件： 因为函数是组件是可以传递参数的// 创建函数式组件function Person (props) { console.log(prop); let { name, age, sex } = props; // 解构赋值 return ( <ul> <li>姓名: {name}</li> <li>性别: {sex}</li> <li>年龄:.

1 ：js 中才有数据类型限制：String(字符串)； Number(数字类型)； boolean(布尔类型)； null(k)

1: props// 准备一个盒子<div><div id="test1"></div><div id="test2"></div>// 一定要加上 text/babel 就是就像ES6语法转化为ES5 语法<script type="text/babel"> // 创建组件 // extends 继承关键字 class Person extends Raect.Component { ..

// 一定要写 text/babel (babel 就是将jsx 语法转化js)<script type="text/babel">// 1: 天气组件class Weather extends React.Component { constructor(props) { super(props); this.state = { isHot: true }; // 初始化数据 this.Weather = this.changeWeather.bind(t..

// 一定要写 text/babel (babel 就是将jsx 语法转化js)<script type="text/babel">// 1: 天气组件class Weather extends React.Component { constructor(props) { super(props); this.state = { isHot: true }; this.Weather = this.changeWeather.bind(this); // 这.

1： // js 原生绑定事件的方式： <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button onclick="btn3()">按钮2</button> <script> // 1: 使用addEventListener let btn1 = document.getElementById('btn1'); //.

1： react 中 status 属性：// 创建一个Student类, 继承Person类class Student extends Person { constructor (name, age, grade) { super(name, age) // 子类重写父类构造方法, 一定要使用super 关键字, 可以将参数通过super() 传递给父类 this.grade = grade } // 重写父类的构造方法 speak() { co

1: React 组件中复杂组件和简单组件react 组件复杂组件和简单组件：有状态的组件就是复杂组件。 无状态的组件就是简单组件什么是有状态组件？ 什么是无状态组件？对比：人 状态 影响 行为组件 状态 驱动 页面我们的数据放在放在组件的state 里边, 状态改变驱动虚拟DOM该变, 从而驱动页面的改变。 // 创建一个容器<div id="test"><div/><script type="text/babel"&

1：react 类组件// 准备一个容器 <div id="test"></div>类总结: 1: 类中的构造方法不是必须写的, 要对实力进行一些初始化操作采写。 2: 如果A类继承B类， 并且A类中写了构造器, A类构造器必须写super() 方法 3：类中定义的方法, 都是放在类中原型上了, 提供实例去使用 4: 在继承中, 如果子类使用方法没有在子类原型上查找到， 就会通过原型链向父级查找----------------------------------

1： React 组件 (函数式组件)1：React提供了两种创建组件方式: 1.1：函数式组件 1.2: 类组件 执行了ReactDOM.render(<myComponent />... 之后, 发生了什么) 1： React 解析组件标签。 找到myComponent 组件 2： 发现组件使用是函数定义, 随后调用该函数, 将返回的虚拟DOM转化为真实DOM, 随后呈现在页面中。 JSX 就是一个语法糖: 就是可以简单的创建虚拟DOM ------------.

1: React ：准备一个容器<div id="test"></div>// 引入react 核心库<script src="../../js/16.8/react.development.js"></script>// 引入react-dom, 用于支持react 操作dom<script src="../../js/16.8/react-dom.development.js"></script>// 引入bab

1: React 学习 原生JS 的痛点：1.1： 原生js 操作dom 繁琐, 效率低，（通过DOM-API 操作UI）1.2: 使用JavaScript 直接操作DOM， 浏览器会进行大量的重绘重排1.3：原生javascript 没有组件化编码方案， 代码复用率低。React: 的特点：1： 采用组件化模式, 声明式编码， 提高开发效率及组件复用率。2： 在Raect Navite 中可以可以使用React 语法进行移动端开发3： 使用虚拟DOM + ...

1: react 组件： 分为简单组件和复杂组件： 简单组件（无状态） 复杂组件（有状态） 函数组件为：为简单组件。 类组件： 为复杂组件。2： 组件状态怎么理解： 对比： 人 ===> 状态 ===> 影响 ===> 行为； 组件 ===> 状态 ===> 驱动 ===> 页面3： react： 组件实例对对象上， 有一个属性是State: 用来描述组件的状态（state） ...

1： 函数式组件： （就必须定义一个函数） 类式组件（就必须定义： 一个类） 对比Vue 中创建子组件： 1：创建子组件模板 2：引入子组件 （注册子组件） 3： 使用子组件 在函数式组件中： 函数名就是组件名： （组件名就是函数名）2： 同理： 类名就是组件名： 1： 创建类式组件： class Component extends React.Component { // 自定义类名继承与 R...

1: React 写法：

1： Raect: 语法 创建虚拟DOM： JSX: 1.1: 全程叫做： javasScript: 1.2: React 定义一种类似于XML 的JS 扩展语法： JS + XML 1.3: 本质是： React.createElement（component, props， ...children） 方法的语法糖 1.4：作用简化创建虚拟DOM 1.4.1： 写法： var ele = <h1> hello JSX </h1&...