- 博客(14)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 React学习笔记之十一:高阶组件(HOC)
11.高阶组件(HOC)什么是HOC怎么封装一个HOCHOC的小栗子HOC的用法深入博文推荐1. 什么是HOC高阶组件(HOC)不是React的API是一种基于组件的编程方法，是为了组件更好的复用而存在的。高阶组件!!!就是一个函数 不要慌！比如获取博客信息列表组件和获取评论列表，虽然可能评论列表在博客信息列表之间有一些差距，比如博客可能有转发等功能，而评论列表可能要有自动...
2019-07-28 12:06:37
516
原创 React学习笔记之十: Context的使用方法
10. React的上下文Context1. Context的作用组件间的参数传递是单向数据流（父->子）,那么如果当子组件嵌套的很深层的时候，就会存在每一层嵌套的过程中都需要通过props进行传参，十分麻烦，要是在整个组件树中能有一个公共的“全局变量”那就好了, 每次我们需要相应的参数只要通过访问这个全局变量就可以达到我们想要的目的了,因此我们使用了上下文Context2. Cont...
2019-07-21 22:43:08
311
原创 React学习笔记之九:生命周期
9. React的生命周期具体的代码可以参考我的github现在我们已经可以使用React实现一些东西了:这里提供两个例子:todoList评论功能来谈谈JSX和React的生命周期JSXReact生命周期1. 一个简单的React组件的JSX原理// 简单的Headerclass Header extends Component { render() { ...
2019-07-21 19:32:43
323
原创 一个小需求:hover使元素变大内容位置不变的效果
问题今天碰到了一个需求，就是当元素hover的时候，元素的上下适当拉长，但是该元素内部的内容位置却不能发生变化。上代码<div class="box"> <div>我的位置不能动！</div></div>.box{ width:100px; height:100px; background: red; margin: ...
2019-07-20 21:21:19
2409
原创 react+mobx+装饰器环境搭建
问题描述:今天在学习mobx的时候发现，使用mobx的装饰器，运行yarn start 报错!!!解决办法：安装@babel/plugin-proposal-decorators@7.4.4yarn add @babel/plugin-proposal-decorators@7.4.4yarn install配置node_modules下的create.js文件将overr...
2019-07-17 23:51:54
308
原创 yarn安装包出现的Unexpected end of JSON input问题解决方法
问题：在使用create-react react-app时出现：error An unexpected error occurred: “C:\Users\Administrator\AppData\Local\Yarn\Cache\v4\npm-send-0.16.2-6ecca1e0f8c156d141597559848df64730a6bbc1\node_modules\send\.yarn...
2019-07-17 23:45:50
3571
原创 React学习笔记之八:表单数据的双向绑定
7.表单的双向数据绑定具体代码可以参考我的github中的my-app参考博文：React表单事件和取值通常需要获取用户在表单内填写的信息，实现对于用户数据的获取并上传，因此表单数据的绑定十分重要，这次我们将对单选，下拉，输入分别进行数据的绑定class Form extends Component { constructor(props) { super(props);...
2019-07-05 11:03:23
940
原创 React学习笔记之七：列表数据的渲染方法
7. 列表数据渲染列表数据非常常见，例如新闻列表，信息列表等，我们在vue中使用v-for对数据列表进行渲染，而react中渲染列表的方式没有语法糖，更为直接,上例子！class ListRender extends Component { constructor(props) { super(props); this.state = { userInfo:...
2019-07-03 15:44:25
403
原创 React学习笔记之六：组件间的参数传递
6. 组件间传参父组件向子组件传参子组件向父组件传参0. 上一波目前为止的App.js文件中我们的组件代码！我们来回顾下之前我们做了啥，目前为止完整的代码：import React, { Component } from 'react';import './App.css';class Header extends Component { render() { re...
2019-07-03 15:42:14
200
原创 React学习笔记之五:事件绑定监听
5.事件的监听上面我们是通过setTimeout实现对于state中content的变化,我现在通过点击事件来控制其中的参数class Content extends Component { constructor(props) { super(props); this.state = { content: '123', count: 0 ...
2019-07-03 15:39:00
522
原创 React学习笔记之四：动态参数绑定
4. 动态参数的设置state查询setState改变参数1.state进行查询// App.jsclass Content extends Component { constructor(props) { super(props); this.state = { content: '123' }; } render() { ...
2019-07-03 15:37:35
860
原创 React学习笔记之三：自定义一个React组件
3.自定义一个App.js组件在上一次我们创建的first-react中，我们打开App组件我们对App组件进行一个重写，写一个自己的Header组件！// App.jsimport React, { Component } from 'react';import './App.css';class Header extends Component { render() { ...
2019-07-03 15:34:37
300
原创 React学习笔记之二：认识index.js
2.index.js先创建一个react工程create-react-app first-reactcd first-reactnpm start我们打开目录下的index.js文件，从入口文件开始认识react// index.jsimport React from 'react';// ReactDom用于页面渲染import ReactDOM from 'react-do...
2019-07-03 15:32:30
6892
1
原创 React学习笔记之一：安装和环境配置
1.React 安装脚手架的搭建npm install -g create-react-appcreate-react-app hello-react项目启动cd hello-reactnpm start插件配置Reactjs code snippetsReact代码补全神器，推荐快捷键使用详见：官方文档ES7 React/Redux/GraphQL/Rea...
2019-07-03 15:27:10
277
HTML+CSS3+原生JS+JQuery学习笔记(详细)
2018-11-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人