读心悦

  • 读心随笔
  • 读心里话
  • 计算机
React
React

React事件绑定

1、在构造函数内使用bind绑定this import React, { Component } from "react"; class Click extends Component { constructor(props){ super(props) this.hanldeClick = this.hanldeClick.bind(this) } hanldeClick(){ console.log("构造函数内使用bind绑定this") } render() { return <button onCl…

2021年01月06日 0条评论 37点热度 0人点赞 阅读全文
React

redux、react-redux状态管理应用

redux 仅仅是用来管理组件的状态,需要满足以下条件: 用户使用方式复杂 不同的用户、不同使用方式(普通用户和管理员); 多个用户之间的协作; 与服务器有大量的交互; View有多个数据源。 其他场景下,能不用redux就不用,否则增加项目的复杂度。 三大特征: 单一的数据源,整个应用的state都存储与store对象中; state只读,只有触发Action(用于描述发生的事件)才能改变state; 使用纯函数(函数的返回值只能依赖于它的参数,相同的输入,只能得到相同的结果)执行修改。 由三个部分构成: 1. …

2021年01月06日 0条评论 14点热度 0人点赞 阅读全文
React

React 的学习目标

生命周期: componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 错误处理 componentDidCatch(): react 16 的Portals特性,将组件渲染到当前组件树以外的DOM节点上。例如应用的全局弹框。 ReactDOM.createPortal(child,con…

2020年10月15日 0条评论 79点热度 0人点赞 阅读全文
React

React Hook 设置对应的生命周期

constructor ====> 使用useState来初始化state componentDidMount ====> 使用useEffect传入第二参数为[]来实现; componentDidUpdate ====> useEffect传入第二个参数为空或者是值为变动的数组; componentWillUnmount ====> 清除副作用,在useEffectreturn一个函数来模拟 shouldComponentUpdate ====> 使用React.memo 包含一个数…

2020年10月12日 0条评论 145点热度 0人点赞 阅读全文
React

【05】React使用虚拟Virtual DOM

JavaScript的DOM树 DOM是结构化文本的抽象表达方式,在一个特定的web环境中它就是HTML文本,HTML中的每一个元素在DOM中有一个对应的节点,而且在HTML中的元素是存在包含关系,DOM节点就构成一个树型结构,称之为DOM树。 浏览器为了渲染和HTML格式的网页,会先把HTML文本解析为DOM树,再根据DOM树渲染出用户所看到的界面,当需要改变的界面的时候,就要修改DOM树上的节点。 浏览器渲染的步骤 构建DOM树,display:none的元素也在DOM树中,只是被隐藏起来了; 构建CSSOM树…

2020年10月09日 0条评论 88点热度 0人点赞 阅读全文
React

【04】react组件和props接收参数

在react应用中,可以使用两种方式来定义组件:函数和class类, 函数组件 class类组件 当react应用在渲染我们所定义的组件之后,react会把jsx接收到的属性或者子组件转化为单个对象传递给组件,这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已,它并不是组件本身自己的数据,所以组件的Props具有不可更改的特征,这就是react的一个规则: 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 组件如何接收接收props? 先说我们常见的函数组件,和我…

2020年10月08日 0条评论 81点热度 0人点赞 阅读全文
React

React-Redux的connect

connect函数是连接React组件和Redux  Store,连接操作过程中不会改变原来的组件,而且返回一个已经与Store连接的新组件。 connect常见的两个参数: 1、mapStateToProps(state,[ownProps]),在定义该函数时,组件会监听Store的变化,只要Store发生变化,mapStateToProps函数就会被调用并且必须返回一个纯对象,该对象会和组件的Props合并。mapStateToProps的参数ownProps。表示传递到组件的Props,也就是每次更…

2020年09月29日 0条评论 97点热度 0人点赞 阅读全文
React

【03】react的jsx语法介绍和使用

官方的描述:JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。它没有任何语义,专门提供给与处理器使用。 在react中声明组件的时候使用jsx,如以下声明的组件: HTML中的onclick和JSX中的onClick 在HTML直接使用onclick,会出现我们意想不到的bug【很意外啊!】: onclick添加的事件函数是在全局环境中…

2020年09月24日 0条评论 106点热度 0人点赞 阅读全文
React

【02】创建react应用的react元素和react组件

当我们创建好一个react应用之后,react应用创建的第一个组件会使用到react、React DOM和prop-types。 React DOM是react的渲染器,将组件渲染成为DOM或者是服务器端渲染的字符串; prop-types的作用是对给组件传递的数据做一个类型检测。 构建react生成的第一个组件 调用React DOM的render方法来创建和管理组件,render方法需要两个参数,一个是应用需要渲染的react组件【ReactElement类型的元素】,另一个就是整个应用的容器【DOMEleme…

2020年09月24日 0条评论 101点热度 0人点赞 阅读全文
React

【01】使用create-react-app创建react应用,快速体验react开发

最快体验react,不需要进行繁琐的配置,使用create-react-app创建react应用。如果电脑上没有安装node的话,需要重新安装node的环境,node本身自带的npm,直接使用即可。 1、安装create-react-app: npm install -g create-react-app 查看create-react-app的版本: create-react-app --version 2、使用create-react-app创建react应用: create-react-app myApp 在创…

2020年09月24日 0条评论 93点热度 0人点赞 阅读全文
123

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
mysql 悦读 vue 小程序 CSS JavaScript 闲谈 canvas taro Nginx 随笔 node redux flutter Echarts hook 阅读 git react
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号