![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React 学习笔记
林夏天
这个作者很懒,什么都没留下…
展开
-
React与Vue的异同点
区别点:Templating vs JSXreact的思路是all in js,通过js来生成html, 所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件, 可以把html、css、js写到一个文件中,html提供了模板引擎来处理react渲染是使用jsx,用js来操作html,列表渲染、条件判断等都通过js来控制,而vue提供了模板的语法,支持指令、过滤器等模板功能,简化原创 2020-08-19 16:32:06 · 1544 阅读 · 0 评论 -
React:React-redux使用
一. Redux简介1. 什么是ReduxRedux是一个用于JavaScript状态容器,提供可与预测化的状态管理。Redux可以让你构建一致化的应用,运用于不同的环境(客户端,服务器,原生应用),并且易于测试。Redux除了和React一起使用外,还支持其他界面库,而且它体小精悍。2. redux的设计初衷随着JavaScript单页面开发日趋复杂,JavaScript需要管理更多的state,这些state可能包括服务器响应、缓存数据、本地生成服务器的数据,也包括UI状态等。管理不断变化原创 2020-08-19 16:21:44 · 290 阅读 · 0 评论 -
React:生命周期
一. React v16.3前的生命周期1. 组件初始化initialization阶段constructor():初始化stategetDefaultProps():设置默认的props,也可以用defaultProps设置组件的默认属性getInitialState():初始化state,可以直接在constructor中定义this.state2. 组件挂载Mounting阶段componentWillMount():在组件挂载到DOM前调用,整个生命周期只会被调用一次,以后组件更新不原创 2020-08-19 16:16:54 · 328 阅读 · 1 评论 -
React:组件通信方式
需要组件之间进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信1. 父组件向子组件通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息。父组件PageA:import React, { Component } from 'react';import ChildA from '../components/ChildA';class pageA extends Component {原创 2020-08-19 16:07:42 · 718 阅读 · 0 评论 -
React:react-router-dom 使用
1. react-router 与 react-router-dom区别react-router与react-router-dom使用时的区别2. 示例安装:首先进入项目目录,使用npm安装react-router-dom:npm install react-router-dom --save-dev基础使用:Class1.js:import React, { Component } from 'react';class Class1 extends Component {原创 2020-08-19 16:03:20 · 780 阅读 · 0 评论 -
React:Context 使用
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行跨层级数据传递的方法,它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据一. 式例11. 目录结构2. 基本使用global.js:import React from "react";export const globalData = { a: 1}export const globalContext = React.createContext(globalData);/public/in原创 2020-08-19 15:56:06 · 397 阅读 · 0 评论