随笔分类 - React
摘要：类似下面这种功能： 点击添加表增加一行，删除表删除一行， 思路：将这个表单抽成一个单独的组件，维护一个时间戳数组，这个数组的作用就是通过map循环来生成动态表单，每次点击添加就在数组里添加一个时间戳。最终遍历有几个item就渲染几个表单。 实现： dynamic.js 动态表单 子组件 import
阅读全文
摘要：1.Redux应用场景 在react中，数据在组件中单向流动的，数据只能从父组件向子组件流通（通过props），而两个非父子关系的组件之间通信就比较麻烦，redux的出现就是为了解决这个问题，它将组件之间需要共享的数据存储在一个store里面，其他需要这些数据的组件通过订阅的方式来刷新自己的视图。
阅读全文
摘要：在上一篇中我们实现了BrowserRoute，这篇我们继续实现HashRouter。 本文的核心功能： HashRouter Route Link NavLink Switch Redirect withRouter 1、HashRouter HashRouter只是一个容器，并没有DOM结构，它渲
阅读全文
摘要：一、路由用法 1.安装路由库 npm i react-router-dom 2.引入 import {HashRouter as Router, Route} from 'react-router-dom' //路由库 3.使用 index.js import React from "react";
阅读全文
摘要：React路由有两种实现方式： HashRouter:利用hash实现路由切换 BrowserRouter：利用h5 Api实现路由切换 1.1 HashRouter 利用hash实现路由切换 <body> <div id="root"></div> <a href="#/a">去/a</a> <a
阅读全文
摘要：一、这是个啥？ 相信很多人和我一样，在听到这个名词的时候第一想知道的这是个啥，是个啥咱翻一下官方文档： 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。 render prop 是一个用于告知组件需要渲染什么内容的函数 prop。 如果一个组件不知道自己渲染什么东西
阅读全文
摘要：https://zhuanlan.zhihu.com/p/28138664 先来回顾一下什么是高阶函数？高阶函数就是接收一个函数作为输入，或者输出另一个函数的类函数。那么高阶组件也就是接收一个react组件作为输入，输出另一个react组件。下面我们实现一个高阶组件。 从localstorage里面
阅读全文
摘要：一、Context 解决什么问题 React是单向数据流，数据是从上往下单向传递的，每个组件都可以接收父组件的属性和状态，也可以把属性和状态向下传递给子组件，但是当层级特别多的时候就会变得非常繁琐。Context 提供了一种在组件之间共享此类值得方式，而不必逐层传递。它主要是用来解决祖先组件向后代组
阅读全文
摘要：一、旧版： 1、initialization 初始化属性和状态 2、Mounting （加载阶段：涉及3个钩子函数） 2.1 componentWillMount() 组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state 2.2 render() react最重要的步
阅读全文
摘要：简单来说，ref就是用来获取真实dom元素或者是组件实例的属性。 1. 创建和访问 ref 的值根据节点的类型而有所不同： 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。 当 ref 属
阅读全文
摘要：组件的数据来源有两个地方，分别是属性对象和状态对象 属性是父组件传递过来的，不可更改 状态是自己内部的，改变状态的唯一方式就是setState 属性和状态的变化都会引起视图更新 import React from "react"; import ReactDOM from "react-dom";
阅读全文
摘要：我们知道react的jsx语法最终会被babel转译成 React.createElement语法，通过这个语法，react节点就会被编译成一棵vdom树结构，我们看一个例子 let ele1 = <h1 id="title"> <span>hello</span> <span>world</spa
阅读全文
摘要：react定义组件的两种方式，一种是函数式，一种是类的方式 返回的是一个顶级元素 一、函数组件 function Welcome(props){ return( // <h1>hello {props.name}</h1> // <h1>hello {props.name}</h1> //不可以这样
阅读全文
摘要：JSX javascript+html 一种把js和html混合书写的语法，这种语法浏览器不支持，最终会通过babeljs转译成creatElememnt语法，React.createElement("h1", null, "hello"); let ele1 = <h1>hello</h1> im
阅读全文
