react | 易学教程

react--路由

阅读更多关于 react--路由

1、路由的安装 cnpm install react-router-dom -S 2、路由的方式 HashRouter: 带hash值的router vue hash BrowserRouter: 不带hash值的router vue history 注意： 1、路由的配置项必须在HashRouter、BrowserRouter内部做配置 2、HashRouter、BrowserRouter内部只能拥有一个子元素 3、路由配置项常用的组件 4、Route 作用:当路径匹配成功以后，渲染相对应的组件属性： path: 组件所对应的路径 component:需要渲染的组件 (组件渲染的方式) render:需要渲染的组件 (组件渲染的方式) exact:路径完全匹配 5、路由跳转的方式 1、link 2、NavLink 属性： activeStyle activeClassName 6、路由嵌套 7、路由渲染的方式 render:组件标签形式 1、不仅可以渲染组件而且还可以渲染标签 2、可以进行组件传值以及逻辑判断 3、render渲染的组件默认是没有history location match 这三个属性的如果需要使用必须经过传递给组件 component:组价名称 1、只能渲染组件 2、凡是通过component进行组件渲染的当前组件的props 中就有多三个属性

[React] Avoiding state flickers

阅读更多关于 [React] Avoiding state flickers

As a user, it can be very disorienting when the "wrong" UI is briefly shown to the user: a login link is shown to an authenticated user, or a 404 error flashes before the page loads correctly. This issue is common in Gatsby applications, because of how Gatsby pre-builds HTML files. In this video, we show how issues like this can slip through, and how we can solve the problem by skipping user-specific state during the build. Instead, we'll leave that spot blank, and fill it in later on the client, when we know what should go there. While this tutorial uses Gatsby, the same lesson can be applied

20.react库入门

阅读更多关于 20.react库入门

vue插件：使用方式：Vue.use(插件名称); {}/function 1、对象 export default { install(Vue,options){ } } 2、函数 export default (Vue,options) => { } 插件里面传参数通过 propsData属性进行传递！ exp1: import Toast from "./toast"; export default { install(Vue,options){//1 //插件2种形式 1、标签 2、方法 //2、方法 Vue.prototype.$toast = ()=>{ let VueComponent = Vue.extend(Toast); let oDiv = new VueComponent().$mount().$el; console.log(111111,oDiv); //111111 <div class="toast">toast插件-----msg默认值</div> document.body.appendChild(oDiv); setTimeout(()=>{ document.body.removeChild(oDiv); },2000); } } } show(){ //传参数 this.$toast("自定义提示信息1") } res:先出现后消失

React之Redux

阅读更多关于 React之Redux

　　本文简单的说下redux。　　首先这有张网页，里面有文字和内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ReactDemo</title> </head> <body> <div id="title"></div> <div id="content"></div> <div id="root"></div> </body> </html> 　　现在让这个网页通过状态来显示标题和内容。 let state = { title:{ color:'red', text:'标题' }, content:{ color:'blue', text:'内容' } } function renderTitle(){ let title = document.querySelector('#title'); title.style.background = state.title.color; title.innerHTML = state

props & children

阅读更多关于 props & children

/*--> */ /*--> */ 一、 choosing the type at runtime import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Wrong! JSX type can't be an expression. return <components[props.storyType] story={props.story} />; } 为了解决这个问题，我们将其赋值给首字母大写的变量 import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Correct! JSX type can be a capitalized variable. const SpecificStory = components[props

react中this的使用方法总结

阅读更多关于 react中this的使用方法总结

react中this的使用方法总结 this的绑定通过this.事件名称.bind(this)进行this绑定。通过箭头函数进行this绑定。 react中遇到循环时this的绑定方法通过赋值的方式进行绑定：var _this = this;。通过this.事件名称.bind(this)进行this绑定。通过在map函数的第二个参数将this传入进行绑定。 react中遇到循环时this的绑定方法通过this.事件名称.bind(this,参数1,参数2,参数3)进行参数传递。通过箭头函数进行参数传递。代码展示如下： import React , { Component } from 'react' ; class ThisComponent extends Component { constructor ( props ) { super ( props ) ; this . state = { list : [ "活着" , "飘" , "哈佛凌晨4点半" ] } this . FuncOne = this . FuncOne . bind ( this ) } FuncOne ( ) { alert ( "this的第一种绑定方法" ) } FuncTwo ( ) { alert ( "this的第二种绑定方法" ) } FuncThree = ( ) =>

应用react-keeper

阅读更多关于应用react-keeper

在vue中有个很好用的组件<keep-alive>，但是在react中官方却没有提供，可以使用react-keeper插件来实现项目实践使用React-Keeper还是要慎重，react-keeper加上会出现两个问题：1.状态缓存了，如果很多页面都是列表，这代表每个页面都有缓存数据，下次进入页面的时候会展示离开时的状态，那么缓存的数据量也不少，会占用浏览器内存，性能肯定会有影响，什么时候清除是个问题。插件提供了cache='parent'为父组件缓存，在父组件不解绑的情况下会维持缓存状态。那么要解决的话就要有个父组件，如果父组件是最外层组件，不会解除，那么就要改变路由了，但插件并没有提供手动消除缓存的方式，使用起来很不灵活，而且会与router3 link有些不同，总之挺麻烦的。2.样式问题，页面回来时，有些样式会缺失，利用生命周期可以解决，但componentDidMount不会执行，componentWillUpdate、render和 componentDidUpdate，如果你在这些周期里面改变数据状态，那么组件周期将一直循环下去，浏览器性能大受影响！下面就是转载的内容了了解React的同学一定了解React-Router，这个几乎是React单页面应用必备的路由框架。如果有足够多的开发经验，你一定会发现React-Router的很多问题，比如：没有页面缓存

react生命周期

阅读更多关于 react生命周期

组件的生命周期可分为三个状态： Mounting：已插入真实DOM Updating：正在被重新渲染 Unmounting：已移出真实DOM 下图展示了不同阶段生命周期函数的执行顺序：生命周期函数指在某一个时刻组件会自动执行的函数。 constructor() 在React组件挂载之前，会调用它的构造函数。主要做两件事情：通过给 this.state 赋值对象来初始化内部 state。为事件处理函数绑定实例注意事项：在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。不要在里边调用setState componentWillMount() 在渲染前调用,在客户端也在服务端。(组件即将挂载到页面上自动执行) componentDidMount() （组件被挂载之后自动执行）在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 componentWillReceiveProps() 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate(nextProps, nextState) 返回一个布尔值

React 10分钟快速入门

阅读更多关于 React 10分钟快速入门

一、简介： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 1.1、React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 1.2、为什么使用 React? React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V （视图）。我们创造 React 是为了解决一个问题：

初始react

阅读更多关于初始react

　　很久就期待学习react了，惰性，一直都没有去翻阅react的资料，最近抽空，简单的了解了一下react，先记录一下，后续慢慢的学习。一、ReactJS简介　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。　　ReactJS官网地址：http://facebook.github.io/react/ 　　Github地址：https://github.com/facebook/react 二、ReactJS特点　　React 的核心思想是：封装组件。　　各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。　　基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。基于这些概念：组件，JSX，Virtual DOM，Data Flow 　　组件　　React 应用都是构建在组件之上。　　上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。 props

订阅 react