![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
肖ZE
这个作者很懒,什么都没留下…
展开
-
react-native 使用字体图标 (react-native-vector-icons)
安装yarn add --save react-native-vector-icons # 下载库react-native link react-native-vector-icons # 自动关联安装关联后项目重启使用import Icon from 'react-native-vector-icons/AntDesign';<Icon name='user' size...原创 2020-02-08 19:56:29 · 352 阅读 · 0 评论 -
react-native 和 react-navigation
react-native 的 flex 默认方向是纵向的获取设备宽度、高度、分辨率<View> <Text>当前设备的宽度:{Dimensions.get('window').width}</Text> <Text>当前设备的高度:{Dimensions.get('window').height}</Text> <T...原创 2020-01-23 10:28:59 · 393 阅读 · 0 评论 -
react-native 错误
'React/RCTBridgeDelegate.h' file not found解决cd /iospod installcd ..react-native run-ios原创 2020-01-22 19:45:05 · 277 阅读 · 0 评论 -
react——react-router-dom 路由与 react-loadable 异步加载组件
import { BrowserRouter, Route } from 'react-router-dom';<BrowserRouter> {/* 用来跳转链接,注意在 BrowserRouter 内部 */} <Link to='/'><p>home</p></Link> <Link to='/detail'&...原创 2019-10-21 23:12:01 · 913 阅读 · 0 评论 -
Styled-Components
它是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性,但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法,虽然比较有用,但是它完全是自选方案,不...转载 2019-10-17 22:32:47 · 607 阅读 · 0 评论 -
react——以 js 写样式(styled-components)
引入:yarn add styled-components使用:// index.jsimport React, { Component } from 'react'import { HeaderWrapper, Logo } from './style'class Header extends Component { render() { return...原创 2019-10-16 23:48:48 · 464 阅读 · 0 评论 -
react——redux 公共库、无状态组件(样式逻辑分离)、Redux-thunk 中间件实现数据请求、react-redux、redux-persist、immutable
Redux = Reducer + FluxRedux 工作流程dispatch/actionstatepreviousState/actionnewStateAction Creators 动作Store 图书管理员React 人Reducers 图书记录本安装yarn add redux原则store 是唯一的只有 store 可以改变自己的内容,而不能通过 reduce...原创 2019-08-22 22:10:14 · 481 阅读 · 0 评论 -
react——动画 react-transition-group
安装yarn add react-transition-group使用动画样式/* 入场动画 */.fade-enter, .fade-appear { opacity: 0;}.fade-enter-active, .fade-appear-active { opacity: 1; transition: opacity 1s ease-in;}.fade-e...原创 2019-08-22 16:06:13 · 137 阅读 · 0 评论 -
react——生命周期函数
生命周期函数指在某一时刻组件会自动调用执行的函数生命周期函数// 组件挂载时componentWillMount // 组件被挂载页面前自动执行render // 组件挂载componentDidMount // 组件被挂载页面后自动执行// 数据更新时componentWillReceiveProps // 一个组件从父组件接受 props 参数,且父组件 render 函数重新...原创 2019-08-21 16:12:42 · 131 阅读 · 0 评论 -
react——ref DOM 操作
class Test extends Component { constructor() { super() this.changeDom = this.changeDom.bind(this) this.list = [] } render() { return ( <div&...原创 2019-08-21 15:22:48 · 330 阅读 · 0 评论 -
react——虚拟 DOM
思路一state 数据模板 (JSX)数据和模板相结合,生成真实的 DOM,来显示state 发生改变数据 + 模板结合,生成真实的 DOM,替换原始的 DOM缺陷:生成和替换非常消耗性能思路二state 数据模板 (JSX)数据和模板相结合,生成真实的 DOM,来显示state 发生改变数据 + 模板结合,生成真实的 DOM,但是并不替换原始的 DOM新的 DOM...原创 2019-08-21 14:59:16 · 121 阅读 · 0 评论 -
react——组件通信、高阶组件
父组件import React, { Component, Fragment } from 'react'import TodoItem from './TodoItem'class TodoList extends Component { constructor(props) { super(props) this.state = { inputValue...原创 2019-08-19 10:24:51 · 187 阅读 · 0 评论 -
react——项目搭建(引入 typescript)、基础数据事件传输绑定(TodoList)
import React, { Component, Fragment } from 'react'import './TodoList.css'class TodoList extends Component { constructor(props) { super(props) this.state = { inputVal...原创 2019-08-19 09:32:16 · 818 阅读 · 0 评论