React
关注
分享
扫一扫
猴子敲代码
猴子胖成猩猩
展开
-
017 redux统一管理state
Redux是js提供的一个可预测性的状态容器，集中度管理react中多个组件的状态。Redux是专门的一个状态管理库，不是react独有的。原创 2021-06-21 11:34:39 · 421 阅读 · 1 评论 -
016 hock的使用
Hock是react 16.7的新特新，可以让无状态组件能够使用状态，在react开发中状态的管理是必不可少的，以前为了进行状态管理，需要使用类组件或者redux等进行管理。useState是用来定义状态，他返回的是一个数组，第一个是当前状态的值，第二个是用于更改状态的函数（类似于setState）。...原创 2021-06-21 11:31:43 · 251 阅读 · 0 评论 -
015 路由的高阶组件-withRouter
什么是高阶组件（HOC）：入参是一个组件，同时返回的也是一个组件，这类组件被称为高阶组件原创 2021-06-21 11:29:51 · 371 阅读 · 1 评论 -
014 React路由-Hash模式-推荐
路由是根据uri的不同来切换对应的组件，实现spa（单页面应用），在页面切换的时候不会刷新，更加接近原生体验。先来安装路由的组件，下载哪个都行npm i --save react-router-dom #功能更全npm i --save react-router #适合线上环境...原创 2021-06-21 11:24:20 · 2130 阅读 · 1 评论 -
013 React.js路由-BrowserRouter模式
路由是根据uri的不同来切换对应的组件，实现spa（单页面应用），在页面切换的时候不会刷新，更加接近原生体验。先来安装路由的组件，下载哪个都行原创 2021-06-21 11:21:15 · 437 阅读 · 1 评论 -
012 axios请求
先安装json-server（模拟数据用的，貌似我用不到）和axios（数据请求）原创 2021-06-21 11:17:55 · 78 阅读 · 0 评论 -
011 create-react-app 组件之间的数据传递
子组件给父组件传值创建一个News组件，在News组件里对父组件进行传值import React, { Component } from 'react'export default class News extends Component { constructor(props) { super(props); this.state = { id: "子组件News" }; }; render() {原创 2021-06-19 12:51:49 · 182 阅读 · 0 评论 -
010 create-react-app 组件创建与使用
先来看一下用create-react-app创建的项目目录结构原创 2021-06-19 12:48:41 · 246 阅读 · 0 评论 -
009 create-react-app 安装并启动
create-react-app是Facebook出的一款react脚手架，需要有nodejs环境才能进行开发。这里用npm进行安装：npm i -g create-react-app安装完成后查询一下create-react-app的版本原创 2021-06-19 12:46:04 · 756 阅读 · 0 评论 -
008 绑定事件与this
React绑定事件使用的小驼峰命名法，在绑定函数的时候不能加()，否则函数会立即执行，不会管你事件是否触发。完整代码见案例文件先来看bind绑定事件原创 2021-06-19 12:44:30 · 70 阅读 · 1 评论 -
008 绑定事件与this
React绑定事件使用的小驼峰命名法，在绑定函数的时候不能加()，否则函数会立即执行，不会管你事件是否触发。完整代码见案例文件先来看bind绑定事件<body> <div id="app"></div></body><!-- 注意type="text/babel" 否则无法起到babel的翻译功能 --><script type="text/babel"> class MySub extends Reac原创 2021-06-16 18:01:00 · 107 阅读 · 0 评论 -
007 ref转发
Ref标示当前组件真正实例的引用，他会返回绑定当前属性的元素，注意ref不能再无状态组件里使用，因为无状态组件没有实例。React提供了三种进行ref的使用原创 2021-06-16 17:49:48 · 94 阅读 · 0 评论 -
006 state（状态）
React中我们关心的是数据，当数据发生改变，页面就会自动花生改变。状态（state）等同于页面中的数据，状态（数据）发生该变，页面中对应的数据绑定内容就会被react自动进行改变。类似于vue的响应式。声明式渲染：一切数据改变操作都不用我们操心，只需要我们声明好数据，react就会自动对数据进行相应的改变。State和props的区别：Prpos是组件对外的接口，state是组件对内的接口State是可变的，props是只读的，除非你在父组件里修改传递给子组件的props...原创 2021-06-16 17:46:44 · 236 阅读 · 0 评论 -
005.2 React面向组件编程-什么是组件-类组件
React的组件分为三个部分，其实可以理解为java的对象，props就是java的get、set.属性props(一般用于父子组件传值)2.状态state（当前组件自己的数据）3.生命周期（啥时候创建，啥时候props改变，啥时候渲染结束等等）创建一个类组件创建一个类组件...原创 2021-06-16 17:44:52 · 108 阅读 · 0 评论 -
005.1 React面向组件编程-什么是组件-函数组件
React的组件分为三个部分，其实可以理解为java的对象，props1.属性props(一般用于父子组件传值)2.状态state（当前组件自己的数据）3.生命周期（啥时候创建，啥时候props改变，啥时候渲染结束等等）...原创 2021-06-16 17:41:21 · 106 阅读 · 0 评论 -
004 遍历JSON对象
遍历对象之前，先看Object.keys()方法，这个方法可以获取指定对象的全部key。<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 --><script type="text/babel"> let user = { id: 1, name: "黑白大彩电", age: 21 }; //Object.keys()方法可以获取指定对象所有的key consol原创 2021-06-15 16:57:51 · 435 阅读 · 0 评论 -
003 React遍历列表
使用ES6的map进行遍历，一定要写return<body> <div id="app"></div> <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 --> <script type="text/babel"> let list = ["吃饭", "睡觉", "打豆豆"]; let dom = list.map((item, index) =>原创 2021-06-15 16:49:06 · 840 阅读 · 0 评论 -
023 react动态加载组件
首先介绍下动态加载函数：require.ensure([], (require)=>{ //.default 是为了使用被引入文件的 default输出项 let A = require('./a.js').default; })或者直接：//.default 是为了使用被引入文件的 default输出项 let A = require('./a.js').default;...原创 2021-06-15 15:16:37 · 1854 阅读 · 0 评论 -
002 jsx使用方式-插值表达式
Jsx的基本语法：原创 2021-06-15 15:10:46 · 272 阅读 · 3 评论 -
001 初始React，与环境搭建
注意：这是我学习react时记录下的个人笔记在学习React之前请先按照NodeJs下的笔记安装开发环境。React是Facebook开发的js框架，先看看他的特点：原创 2021-06-15 15:06:31 · 89 阅读 · 0 评论