React
文章平均质量分 91
___Alive___
努力的学,然后骄傲的活着。
展开
-
React之UI组件、容器组件以及无状态组件
一:三种组件的简单理解1.UI组件:只负责页面的渲染2.容器组件:只负责业务逻辑和数据的处理3.无状态组件:把UI组件用函数表示(可以省去生命周期函数,优化代码)二:具体代码 注意:以上一篇文章举例点击打开链接 1.普通组件TodoList.js(拆分成TodoListUi.js(UI组件)和TodoList.js(容器组件))import React ,{Compone...原创 2018-07-08 16:53:58 · 3128 阅读 · 0 评论 -
React之过渡和动画效果
1:效果图2:目录结构(利用官方脚手架进行删减)3:index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));4:App.jsimp...原创 2018-07-07 17:05:51 · 5148 阅读 · 1 评论 -
React之react-router-dom
1:一些区别react-router React Router 核心react-router-dom 用于 DOM 绑定的 React Routerreact-router-native 用于 React Native 的 React Routerreact-router-redux React Router 和 Redux 的集成react-router-config 静态路由配置的小助手2:地...原创 2018-07-13 16:48:28 · 1186 阅读 · 0 评论 -
React之生命周期函数
一:MountingcomponentWillMount():在组件即将挂载在页面的时刻自动执行render():componentDidMount():在组件挂载在页面后的时刻自动执行二:UpdationcomponentWillReceiveProps():需要满足三个条件才会执行 一个组件要从父组件接受参数 ...原创 2018-07-07 11:40:52 · 309 阅读 · 0 评论 -
React之TodoLIst(涉及父子组件传值)
1:安装react官方脚手架注意:需要在计算机上安装Node> = 6和npm> = 5.2npx create-react-app my-appcd my-appnpm start2:调整目录结构3:index.js(程序入口文件)import React from 'react';import ReactDOM from 'react-dom';import TodoList...原创 2018-07-06 18:59:10 · 582 阅读 · 0 评论 -
React之axios的基本用法
1:简单介绍Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。2:地址https://www.kancloud.cn/yunye/axios/2348453:get请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.l...翻译 2018-07-13 11:33:55 · 8624 阅读 · 0 评论 -
React之用react-transition-group的CSSTransition完成搜索框的过度效果
官方地址:https://reactcommunity.org/react-transition-group/一:没有使用Transition1:效果2:主要代码:(使用了styled-components参考点击打开链接) 2.1:style.js import styled from 'styled-components';export const SearchWrap...原创 2018-07-11 16:58:45 · 2346 阅读 · 1 评论 -
React之styled-components
1:styled-components作用解决 CSS 全局作用域的问题,使各个组件之间的样式互不影响2:安装npm install --save styled-components3:在css文件里引入import {injectGlobal} from 'styled-components';注意:此时css文件可以改成js文件...原创 2018-07-11 12:55:20 · 1142 阅读 · 0 评论 -
React之带标签的字符串转义为html解析
在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,如果直接插入的话页面显示的就是这段字符串,而不会进行转义使用此属性可以转义并显示内容注意:定义在组件属性上<Content dangerouslySetInnerHTML={{ __html: this.props.content}}/>...原创 2018-07-15 10:16:20 · 1939 阅读 · 0 评论