react
欧气的猫七姑娘
这个作者很懒,什么都没留下…
展开
-
react-redux
下载 npm install react-reduximport React from 'react';import ReactDOM from 'react-dom';// import App from './App'; // 会自动补全。js文件import TodoList from './todoList';import { Provider } from 'react-redux'; // react-redux提供的核心apiimport store from './store.原创 2021-01-11 16:48:29 · 79 阅读 · 0 评论 -
redux-saga
redux-saga使用dispatch派发action时,同时派发一个action到saga中,就是,saga能监听到action的触发目的:强化redux,帮助处理异步逻辑使用:1, 下载redux-saga2.配置相关信息import {createStore,applyMiddleware,compose} from 'redux';import createSagaMiddleWare from 'redux-saga';import reducer from './reducer原创 2021-01-11 16:12:44 · 83 阅读 · 0 评论 -
redux-thunk
1.redux-thunk是redux的中间件,是用来丰富redux的功能的,不是react的中间件好处:正常情况下,redux中的actionCreators创建的action值能是对象,但是,使用了redux-thunk后,action的返回值可以函数!!!可以写异步代码下载插件 npm install redux-thunk使用:创建store时使用import {createStore,applyMiddleware,compose} from 'redux';import thun原创 2021-01-11 15:24:22 · 375 阅读 · 0 评论 -
redux
redux = reducer+flux;数据层框架flux 有缺陷升级成了redux原创 2021-01-11 11:07:32 · 205 阅读 · 1 评论 -
react中生命周期函数
在某一时刻,组件会自动调用执行的函数render都属于生命周期函数mount阶段的生命周期函数update阶段componentWillReveiveProps(){} 这个生命周期函数,如果没有对应的父组件,这个生命周期函数不会执行1.一个组件要从父组件接受了参数2.只要父组件的render函数被执行了,子组件的这个生命周期函数就会执行(如果这个组件第一次存在于父组件中,不会执行;如果这个组件之前已经存在父组件中,才会执行)unmounting阶段componentWillUnmou原创 2021-01-08 15:58:46 · 153 阅读 · 1 评论 -
react中的虚拟dom
数据-模板-页面自动生成state数据jsx模板数据+模板生成真实dom数据变化数据+模板结合,生成真实dom,替换原始dom##缺陷第一次生成了 完整的dom片段第二次生成了完整的dom片段第二次dom替换第一次dom 耗性能局部改变也要生成完整的dom片段,很耗性能1.state数据2.模板3.数据+模板生成真实dom4数据改变5.数据+模板生成真实的dom,并不直接替换原始的dom6 新的dom与旧dom结构做比对,找出差异7.找出input框发生变化8.只用新的i原创 2021-01-08 14:22:24 · 261 阅读 · 0 评论 -
props-state-render函数的关系
props-state-render函数的关系当组件的props或者state被修改的话,render方法就会执行。当父组件的render方法运行时,子组件的render方法也会重新运行原创 2021-01-08 14:00:50 · 88 阅读 · 0 评论 -
propTypes-类型校验
父子组件传值时,可以对传递的数据进行类型的强校验。import PropTypes from 'prop-types'; // 对父组件传递过来的数值进行强校验// 对组件做类型的强校验TodoItem.propTypes={delItemEvent:PropTypes.func,index:PropTypes.number,test:PropTypes.string.isRequired, // 要求父组件必须给子组件传递这个test变量}如果要求test变量必须传递,但是父组件不传递就.原创 2021-01-08 13:51:00 · 331 阅读 · 0 评论 -
react语法
在jsx中编写注释{/* 注释说明 */}{// 这样也行}在jsx中要写js表达式的话,需要放到{}花括号中react中认为class是一个类,所以写样式的时候,class应该替换成为className在todoList逻辑中,如果输入的是<h1>hello<h1>这样的文本,想让他直接出来大写的hello,而不是<h1>hello<h1>,可以这样做!(<li key={index} dangerouslySetInnerHTML.原创 2021-01-07 16:31:59 · 74 阅读 · 0 评论 -
react完成todoList
熟悉react语法,完成todoList小逻辑1.immutable这个,state不允许我们自己修改,如果要修改state数据,需要copy副本修改2.this指向问题,绑定事件时,需要指定函数调用时的this3.循环生成列表,使用.map方法4.不想要多余的div标签,可以使用fragment代替import react, { Component, Fragment } from 'react';class TodoList extends Component { constructor原创 2021-01-07 16:10:57 · 179 阅读 · 0 评论 -
react初探
react起步1.先安装node环境2. npm install create-react-app下载create-react-app 这个node包3.运行 npx create-react-app my-app 命令这三步会创建一个react应用定义组件的方式class App extends React.Component{ render(){ return ( <div> 学习react </div> )原创 2021-01-07 15:22:24 · 82 阅读 · 0 评论 -
react-组件组合
react中除了一些基本的操作之外,还有一些纯组件,高阶组件,高阶组件链式调用,高阶组件装饰器写法,组合使用组件,等等组合组件,类似于vue中slot最简单的用法,默认插槽import React, { Component } from 'react'function Dialog(props){ return( <div style={{border: `1px so...原创 2020-02-23 16:06:33 · 191 阅读 · 0 评论 -
07-react-redux(基本使用)
使用reduximport store from ‘./store’ 这样写会自动寻找store文件夹下面的index.js创建store(图书管理员,需要先创建reducer,图书记录本)import {createStore} from 'redux'import reducer from './reducer'const store = createStore(reducer)e...原创 2019-11-20 17:52:41 · 104 阅读 · 0 评论 -
06-react-动画效果、react-transition-group
基础的过渡动画 <div> <div className={this.state.show? 'show' : 'hide'}>hello</div> <button onClick={this.handleToggle.bind(this)}>toggle</button> <...原创 2019-11-20 17:46:12 · 79 阅读 · 0 评论 -
05-react-ref、生命周期
react中ref的使用获取元素对应的dom节点e.target 或者ref在dom标签上绑定ref<ul ref={(ul) => {this.ul = ul}}> {this.getTodoItem()} </ul>这样在函数中就可以通过this.ul来获取对这个ul的引用记住,setState是一个异步函数,如果...原创 2019-11-20 17:45:43 · 211 阅读 · 0 评论 -
04-react-jsx
jsx语法中注意事项在jsx中写注释{// 写在这里}写样式如何在react组件中使用样式?将样式写在一个单独的css文件中,在js文件中通过import的方式引入在react中有class这个类,所以当给标签加样式类时,需要将class变成className在输入框中,输入的内容如果有时希望这个对象不被转译,可以写如下代码dangerouslySetInnerHTML...原创 2019-11-20 17:45:05 · 69 阅读 · 0 评论 -
03-react-开发调试工具、 props、state与render、虚拟dom
propsTypes限制父组件传递给子组件的数据类型import PropTypes from 'prop-types'// 父组件传递给子组件的类型做类型校验// 加上isRequired说明这个值必须有,如果没有传递会报错,阻止报错的话可以使用下面的defaultpropsTodoItem.propTypes = { test: PropTypes.string.isRequire...原创 2019-11-20 17:44:36 · 151 阅读 · 0 评论 -
02-react-开启工程项目
react JS 网页效果 facebook 推出的2013年 函数式编程 人数最多的框架reactNative 编写app学习的也是react16.2版本, react16.2版本 称之为 react fiber开发环境第一种方式, 引入js文件来使用react第二种:方式, 脚手架工具来编码(在脚手架写的代码需要用工具编译浏览器才能认识)脚手架工具:官方提供的 create-r...原创 2019-11-20 17:43:56 · 83 阅读 · 0 评论 -
01-react-todolist
jsx语法在js中写html结构注意:在jsx语法中,如果要使用自己创建的组件,组件开头必须是大写字母使用react编写简单的todolist在src下面创建一个todolist.js文件,需要返回一个todolist组件render函数需要通过return返回一段html结构,原则上,这段html结构需要有唯一的di标签包裹,但是如果不需要这样的一个标签,在react16版本之后,提...原创 2019-11-20 17:42:40 · 60 阅读 · 0 评论