随笔分类 - React
摘要：1，redux 默认不能进行异步处理，当需要进行异步任务（ajax 请求，定时器等），需要使用 异步中间件 redux-thunk（redux 插件） 2，下载 ： npm install --save redux-thunk 3, 在 store中 应用 异步中间件 4，在 action 中添加
阅读全文
摘要：1，在 react 中单纯的使用 redux，react 和 redux 代码耦合度太高，经常需要用到 store 对象，为降低 react 和 redux 的耦合度，可以使用 react-redux 这种 react 插件， 2，下载 : npm install -- save react-red
阅读全文
摘要：实现需求： 1，项目中引入 redux ： npm install --save redux 2，首先在入口文件中 创建一个 store 对象 store 对象中要传入一个 reducer ，完成 reducer之前，假定 store 对象已经创建好，当store对象中的状态 state 发生改变的
阅读全文
摘要：select 标签 在HTML中，<select > 创建一个下拉列表，selected 属性可以设置初始化选中 React中，并不使用这个 selected 属性，而是在根 select 标签中使用了一个 value 属性，这使得受控组件使用更方便，因为你只需要更新一处即可。 textarea标签
阅读全文
摘要：1，在 JavaScript 中 怎么转换列表？ 我们使用 map() 函数使 numbers 数组中的元素值翻倍，将 map() 返回的新数组分配给变量 doubled 2，React中，转换数组为元素列表的方式，和上述方法基本相同 import React, { Component } from
阅读全文
摘要：React 中的条件渲染就和在 JavaScript 中的条件语句一样。使用 JavaScript 操作符如 if 或者 条件操作符 来创建渲染当前状态的元素，并且让 React 更新匹配的 UI 。 import React, { Component } from 'react'; export
阅读全文
摘要：在JSX回调中 需要注意 this 的指向，在JavaScript中，类方法默认没有绑定的。如果没有绑定 this.handleClick 并将其传递给 onClick，那么在直接调用该函数时，this 会是一个 undefined。 这不是React 特有的行为，这是JavaScript 中的函数
阅读全文
摘要：1，push 2，replace push，添加一个路由历史，replace 是替代最后一个路由历史，注意区别 可分别定义 使用 push 和 使用 replace 进行路由跳转的方法，进行效果的比对， 比如，当 点击 message01 后的 push ，MessageDetails 显示 mes
阅读全文
摘要：我们定义的每个 message 都有一个 id 属性，我们可以根据这个属性控制 MessageDetails 中显示的内容，点击 message01链接，那么就相应的显示 message01 的详情。 实际上，MessageDetails 在这里是三级路由，所以 MessageDetails 也是通
阅读全文
摘要：在Home 组件中，有两个子路由组件，News 组件 和 Messages 组件，以同样的方式，先编写路由组件，然后在Home组件中指定路由链接和路由 注意，子路由的 to 和 path 的值，前面要加上父路由 下面，我们完成 news 组件： News 组件我们渲染新闻列表即可： 接下来完成 me
阅读全文
摘要：如图，如果我们希望自定义选中的路由链接样式，我们可以自定义 NavLink 第一步，定义一个 MyNAVLink组件，这个组件用来渲染 NavLinK 组件标签 其中，activeClassName 是 react-router 中的标签属性，{ ... this.props } 表示将外部传入的所
阅读全文
摘要：效果 点击About，切换到About组件的内容 点击Home，就切换到Home组件的内容 默认是渲染About组件标签 第一步，准备 ①下载：npm install --save react-router-dom 在package.json中可以看到我们下载的依赖中有 react-router ②
阅读全文
摘要：使用①：改变上一个 github user 的 组件通信方式 在上面一篇 search github users 中，Search 组件和 List 组件 的通信 是通过 props 完成的，且中间需要父组件APP 的参与， 下面 我们使用消息的 发布 订阅 机制 ，以这种模式 实现 Search
阅读全文
摘要：需求：搜索框输入要搜索的用户名，列表中展示相关的用户的头像和昵称。 第一步：拆分组件 共拆分为4个组件，APP，Search，List，Item 第二步，定义组件并初始化显示静态组件 第三步：初始化显示数据 这里需要考虑 ① List 组件显示数据 ②但是 List 组件要求 页面一加载先 提示 一
阅读全文
摘要：①get 方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：需求：页面中没有显示信息时，显示 Loading....， 当获取到 用户信息后，显示 xxx （username） 的邮箱是：xxx( email ) 测试接口：http://jsonplaceholder.typicode.com/users 第一步，定义组件并渲染组件标签， 第二步，使用 ax
阅读全文
摘要：第一步，拆分组件 一共拆分为4个组件 同时，需要在入口文件 index.js 中，写入： 第二步，实现静态组件 ①实现静态组件需要用到的 bootstrap.css 可以放在 public 文件夹下，然后在 index.html 中引入 ②根组件APP组件中先进行初步的布局 这里需要注意，组件的首字
阅读全文
摘要：DOM Diff 算法的作用：实现最小化页面重绘， 判断哪片区域需要更新，哪片区域不需要更新，减少更新次数，提高效率 在这个效果中，可以看到， 在input中输入内容时，只会更新时间，不会更新输入框（否则内容就没了） 只会局部更新，这就体现了DOM Diff 算法的作用 原理图：
阅读全文
摘要：需求: 自定义组件 1. 让指定的文本做显示/隐藏的渐变动画 2. 切换持续时间为2S 3. 点击按钮从界面中移除组件界面 第一步：初始化定义静态组件，并渲染组件标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF
阅读全文
摘要：需求: 自定义包含表单的组件 1. 输入用户名密码后, 点击登陆提示输入信息 2. 不提交表单第一步：①初始化静态组件，并渲染组件标签， ②用户名的方式使用非受控组件的方式收集表单数据。 ③另外需要实现阻止表单提交的默认行为 1 <!DOCTYPE html> 2 <html lang="en">
阅读全文
浙公网安备 33010602011771号