React
Dream_Lee_1997
勇气
展开
-
解决create-react-app脚手架创建的项目中按需引入ant-design时 报错TypeError: injectBabelPlugin is not a function的问题
React:create-react-app脚手架项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function错误形式错误原因解决办法错误形式运行npm start时报如下错误:TypeError: injectBabelPlugin is not a function如下图:错误原因好像说是react-scrip...原创 2019-01-20 14:04:29 · 1018 阅读 · 0 评论 -
【React】知识点归纳:组件间通信、事件监听理解及ES6 常用新语法
React:组件间通信、事件监听理解及ES6 常用新语法一、组件间通信方式一: 通过 props 传递方式二: 使用消息订阅(subscribe)-发布(publish)机制方式三: redux二、事件监听理解原生 DOM 事件自定义事件(消息机制)三、ES6 常用新语法一、组件间通信方式一: 通过 props 传递共同的数据放在父组件上, 特有的数据放在自己组件内部(state)通过 ...原创 2019-01-29 10:24:50 · 915 阅读 · 0 评论 -
【React】知识点归纳:react-router
React-router4react-router 的理解SPA 的理解路由的理解前端路由的实现react-router 的理解react 的一个插件库专门用来实现一个 SPA 应用基于 react 的项目基本都会用到此库SPA 的理解单页 Web 应用(single page web application,SPA)整个应用只有一个完整的页面点击页面中的链接不会刷新页面, ...原创 2019-01-29 11:47:38 · 330 阅读 · 0 评论 -
【React】知识点归纳:react-router4相关属性API介绍
React:react-router4相关属性API介绍1、安装2、 BrowserRouter3、BrowserRouter属性getUserConfirmation的使用例子4、HashRouter5、Link6、NavLink7、Prompt8、MemoryRouter9、Redirect10、Route11、Router12、StaticRouter13、Switch14、history1...原创 2019-01-29 13:34:40 · 346 阅读 · 0 评论 -
【React】知识点归纳:react-ui
react-ui最流行的开源 React UI 组件库使用 create-react-app 创建 react 应用搭建 antd-mobile 的基本开发环境实现按需打包(组件 js/css)最流行的开源 React UI 组件库material-ui(国外)官网: http://www.material-ui.com/#/github: https://github.com/ca...原创 2019-01-29 14:07:17 · 397 阅读 · 0 评论 -
【React】知识点归纳:redux
reduxredux 理解学习文档redux 是什么?redux 工作流程redux 的核心 APIcreateStore()store 对象applyMiddleware()combineReducers()redux 的三个核心概念actionreducerstoreredux 理解学习文档英文文档: https://redux.js.org/中文文档: http://www.red...原创 2019-01-29 19:25:34 · 223 阅读 · 0 评论 -
【React】知识点归纳:使用redux来编写一个简单的应用
使用redux来编写一个简单的应用使用redux编写效果下载依赖包源代码使用react编写效果源代码使用redux编写效果下载依赖包npm install --save redux源代码components/app.js/*应用组件 */import React, {Component} from 'react'import PropTypes from 'prop-t...原创 2019-01-30 13:38:50 · 408 阅读 · 0 评论 -
【React】知识点归纳:react-redux
react-redux一、react-redux理解React-Redux 将所有组件分成两大类相关 API二、使用 react-redux一、react-redux理解一个 react 插件库专门用来简化 react 应用中使用 reduxReact-Redux 将所有组件分成两大类UI 组件a. 只负责 UI 的呈现,不带有任何业务逻辑b. 通过 props 接收数据(一般...原创 2019-01-30 14:22:47 · 413 阅读 · 0 评论 -
【React】知识点归纳:redux 异步编程
redux 异步编程下载 redux 插件(异步中间件)案例效果:源代码:下载 redux 插件(异步中间件)npm install --save redux-thunk案例效果:源代码:对比 使用react-redux编写此案例网址:https://blog.csdn.net/qq_41846861/article/details/86702584index.js引入re...原创 2019-01-30 15:53:05 · 331 阅读 · 0 评论 -
【React】知识点归纳:react-redux 理解React-redux中connect方法的使用
理解React-redux中connect方法的使用关于React-redux为什么会有ReduxStore与视图层的绑定Provider组件Provider组件源码:connect方法关于React-reduxRedux是React全家桶的重要一员,之前在知乎上也看到类似的提问:该如何通俗易懂的理解Redux?Redux是JavaScript的状态容器,Redux的概念简单明了:应用中...原创 2019-01-30 16:34:59 · 591 阅读 · 0 评论 -
redux 调试工具安装及使用
redux 调试工具的安装及使用安装 chrome 浏览器插件在谷歌应用商店下载redux-devtools,去谷歌应用商店搜索redux-devtools直接安装即可。将下载好的插件直接拖到浏览器右上角->更多工具->扩展程序中。也可以在本站离线下载安装chrome redux调试插件,离线安装的方法参照:chrome插件的离线安装方法。最新chrome浏览器下载地址:h...原创 2019-01-30 16:57:53 · 2946 阅读 · 0 评论 -
【React】知识点归纳:纯函数和高阶函数
纯函数和高阶函数纯函数高阶函数纯函数一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。一类特别的函数: 只要是同样的输入,必定得到同样的输出必须遵守以下一些约束a. 不得改写参数b. 不能调用系统 I/O 的 APIc. 能调用 Date.now()或者 Math.random()等不纯的方法reducer 函数必须是一个纯函数...原创 2019-01-30 19:31:20 · 1946 阅读 · 0 评论 -
同源策略限制及跨域问题的解决方法
什么是同源策略同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。什么是同源同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。(URL由协议、域名、端口和路径组成)浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。从一个域上加载的脚本不允许访问另外一个域的文档属原创 2019-01-28 18:45:33 · 4024 阅读 · 0 评论 -
【React】知识点归纳:axios、Fetch的相关API
React:axios、Fetch的GET、POST请求方法AxiosGET 请求POST请求FetchGET 请求POST请求AxiosGET 请求axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(er...原创 2019-01-28 13:06:37 · 322 阅读 · 0 评论 -
解决TypeError:_WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
react引用react-redux,写项目的时候,出现错误:TypeError:_WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function错误形式:如图:错误原因react-redux版本更新到6.0以上,版本更新问题解决方案降低react-redux版本,首先将package.json...原创 2019-01-21 11:26:36 · 32905 阅读 · 6 评论 -
【React】知识点归纳:React JSX、虚拟DOM、模块与组件和模块化与组件化的理解
JSX1)全称: JavaScript XML2)react定义的一种类似于XML的JS扩展语法: XML+JS3)作用: 用来创建react虚拟DOM(元素)对象var ele = <h1>Hello JSX!</h1>注意1: 它不是字符串, 也不是HTML/XML标签注意2: 它最终产生的就是一个JS对象4)标签名任意: HTML标签原创 2019-01-21 19:45:40 · 462 阅读 · 0 评论 -
【React】知识点归纳:组件三大属性 state、props、refs与事件处理
1.state理解1)state是组件对象最重要的属性, 值是对象(可以包含多个数据)2)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)编码操作1)初始化状态:constructor (props) { super(props) this.state = { stateProp1 : value1, st...原创 2019-01-21 20:52:23 · 347 阅读 · 0 评论 -
【React】知识点归纳:组件的组合、收集表单数据
1、组件的组合效果功能: 组件化实现此功能显示所有 todo 列表输入文本, 点击按钮显示到列表的首位, 并清除输入的文本功能界面的组件化编码流程(无比重要)拆分组件: 拆分界面,抽取组件实现静态组件: 使用组件实现静态页面效果实现动态组件a. 动态显示初始化数据b. 交互功能(从绑定事件监听开始)源代码<!DOCTYPE html>&am原创 2019-01-22 11:26:52 · 501 阅读 · 0 评论 -
【React】知识点归纳:组件生命周期
组件生命周期案例效果需求: 自定义组件让指定的文本做显示/隐藏的渐变动画切换持续时间为 2S点击按钮从界面中移除组件界面组件生命周期的理解组件对象从创建到死亡它会经历特定的生命周期阶段React 组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作生命周期流程图生命周...原创 2019-01-22 13:49:12 · 215 阅读 · 0 评论 -
【React】知识点归纳:虚拟 DOM 与 DOM Diff 算法
React:虚拟 DOM 与 DOM Diff 算法React高效原因:基本流程图简单案例源代码运行效果总结详细参考博文:React高效原因:1.虚拟(virtual)DOM:不总是直接操作实际的DOM元素,而是先修改virtual DOM里的对象 当要在一个页面连续修改多个地方时 最后将Virtual DOM里所有要修改玩的对象映射到实际的DOM元素里,批量修改,访问更新/重绘的的次数减少...原创 2019-01-22 15:09:02 · 338 阅读 · 0 评论 -
【React】知识点归纳:react-demo
React-demo: 评论管理设计流程源代码app.jsxcomment-add.jsxcomment-list.jsxcomment-item.jsx总结设计流程1.拆分组件应用组件: Appstate: comments/array添加评论组件: CommentAddstate: username/string, content/stringprops: add/f...原创 2019-01-22 16:40:47 · 401 阅读 · 0 评论 -
【React】知识点归纳:受控组件与非受控组件区别
React: 受控组件与非受控组件区别受控组件示范代码:原理图:非受控组件示范代码:结论受控组件在HTML中,标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中...原创 2019-01-22 17:51:20 · 20084 阅读 · 1 评论 -
【React】知识点归纳:react中使用axios获取后台服务器数据
React-Ajax: react中使用axios获取后台服务器数据,所有的数据请求统一写到一个文档里面react项目中获取数据的工具比较多,比如fetch 、axios, 这2个应该是使用最多的。在练习的时候遇到一个问题:就是将所有的数据请求统一写到一个文档里面,比如get-api.js目的就是后期的维护,方便修改。但是axios 获取到的数据是无法return出去的所以我的实现方案...原创 2019-01-28 11:40:40 · 2389 阅读 · 1 评论 -
【react】获取数据ajax()、$.ajax()、fetch()、axios
1、ajax()import React from 'react';import ReactDom from 'react-dom';import ajax from './tool.js';class Nav extends React.Component{ constructor(){ super(); this.state = { ...转载 2019-01-28 11:55:24 · 129 阅读 · 0 评论 -
【React】知识点归纳:react ajax
react ajax原创 2019-01-28 11:02:37 · 452 阅读 · 0 评论 -
面试参考
https://www.cnblogs.com/isLiu/p/7811731.html#3954868原创 2019-01-31 10:34:40 · 365 阅读 · 0 评论