React
React学习
A_bad_horse
不积跬步,无以至千里!
展开
-
React React-redux
学习目标 React-Redux学习(不需用subscribe) 安装: cnpm install react-redux --save概念:Provider组件:自动的将store里的state和组件进行关联。 MapStatetoProps:这个函数用于将store的state映射到组件的里props mapdispatchToProps:将store中的disp...原创 2020-04-19 23:25:06 · 183 阅读 · 0 评论 -
React Redux
学习目标Redux基本知识&基本用法解决React数据管理(状态管理),用于中大型,数据比较庞大,组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux,那么你就不需要用它! 解决组件的数据通信。 解决数据和交互较多的应用 Redux只是一种状态管理的解决方案! Store:数据仓库,保存数据的地方。 State:state是1个对象,...原创 2020-04-19 22:17:15 · 136 阅读 · 0 评论 -
React Props(父传子)
学习目标了解prop概念 了解父传子的原理Props父传递给子组件数据,单向流动,不能子组件传递给父组件。props的传值,可以是任意类型。Props默认值设置HelloMessage.defaultProps = {name:"Bill"}注:props可以传递函数,props可以传递父元素的函数,可以修改父元素的state,从而达到...原创 2020-04-16 16:04:01 · 228 阅读 · 0 评论 -
React 事件详解
学习目标React事件知识React事件特点 绑定事件的命名规则:驼峰命名 传入1个函数,而不是字符串。 <button onClick={this.sendData}>发送数据 </button>事件对象:React返回的事件对象是代理点的原生的事件对象。如果想要查看事件对象的具体值,必须直接输出事件对象的属性。原生:阻止默认行...原创 2020-04-16 22:07:53 · 307 阅读 · 0 评论 -
React 路由学习 02
学习目标 重定向组件 switch组件 页面跳转 如果访问某个组件时,如果有重定向组件,那么就会修改页面路径,使得页面内容显示为所定向路径的内容。实例一 Redirectimport React from 'react';import {BrowserRouter as Router,Link,Route, Redirect} from 'reac...原创 2020-04-19 20:06:54 · 158 阅读 · 0 评论 -
React 路由学习 01
学习目标 路由基本概念 通过实例学习路由Router:所有路由组件的根组件(底层组件),包裹路由规则的最外层容器。根据不同的路径,显示不同的组件(内容);React使用的库react-router-dom; react-router 核心组件 react-router-dom 应用于浏览器端的路由库(单独使用包含了react-router的核心部分)...原创 2020-04-19 19:19:51 · 197 阅读 · 0 评论 -
React 插槽
学习目标组件插槽原理组建中写入内容,这些内容可以被识别和控制。React需要自己开发支持插槽功能。原理:组件中写入的HTML,可以传入到props中。实例一 props-children组件中的HTML内容直接全部插入。import React from 'react';import ReactDOM from 'react-dom'...原创 2020-04-19 11:10:57 · 202 阅读 · 0 评论 -
React 生命周期
学习目标 生命周期 React声明周期 Mounting:将组件插入至DOM Updating:将数据更新至DOM(重新渲染DOM) Unmounting:将组件移出DOM 钩子函数“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。钩子函数的状态有4个阶段:1.初始化阶...原创 2020-04-17 17:46:01 · 157 阅读 · 0 评论 -
React 循环遍历
学习目标 forEach map filter reduce for...in for..of forEachforEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。语法:forEach(currentValue, index, arr)...原创 2020-04-17 15:47:05 · 3575 阅读 · 0 评论 -
React 列表渲染
学习目标 列表渲染 第一种:将列表内容拼装成数组放置到模板中。第二种:将数据拼装成数组的JSX对象。实例一手动创建列表import React from 'react';import ReactDOM from 'react-dom';let arr = ["小明", "小黑", "小白"];let arrHTML = [<li>小明</li...原创 2020-04-17 09:56:10 · 288 阅读 · 0 评论 -
React 条件渲染
学习目标if-else 条件渲染 三元符条件渲染实例一 直接返回JSX对象import React from 'react';import ReactDOM from 'react-dom';function UserGreet(props) { // 函数组件 return (<h1>欢迎登录</h1>)}function UserLogin(p...原创 2020-04-16 22:32:51 · 121 阅读 · 0 评论 -
React 数据传递(子传父)
学习目标了解父元素组件与子元素属性之间的通信机制实例一子元素传递给父元素数据import React, { Children } from 'react';import ReactDOM from 'react-dom';class ParenetCom extends React.Component { constructor(props) { super(prop...原创 2020-04-16 20:17:36 · 1696 阅读 · 0 评论 -
React 函数讲解
学习目标纯函数 React函数三种写法 React事件处理纯函数 首先得是一个函数。 当给定相同的输入(函数的参数)的时候,总是有相同的输出(返回值)。 没有副作用。 不依赖于函数外部状态。 当一个函数满足以上条件时,该函数可以称为是纯函数。// 非纯函数let payload = 0;function addOne(number) { ...原创 2020-04-16 19:39:33 · 1563 阅读 · 0 评论 -
React setState
学习目标 setState 事件绑定 实例一初始化组件import React from 'react';import ReactDOM from 'react-dom';class Clock extends React.Component { constructor(props) { super(props) // React的状...原创 2020-04-16 15:25:16 · 289 阅读 · 0 评论 -
React 组件
学习目标 了解组件模式 组件分类 类组件又称为动态组件,类组件中可自定义方法,一般有事件交互(点击事件、触发事件)和数据修改的操作。 函数式组件(静态组件)比较简单,一般用于静态、没有内容交互事件内容的组件页面。函数式组件中嵌套函数不方便。 复合组件:组件中包含其他组件,复合组件中既可以有类组件又可以有函数组件。 注:ReactDOM.render中只能放一...原创 2020-04-16 10:50:02 · 234 阅读 · 0 评论 -
React样式
学习目标了解如何引入样式实例一 (加载样式)import React from 'react';import ReactDOM from 'react-dom';let exampleStyle = { background: "skyblue", borderBottom: "4px solid red"}let element = ( <div>...原创 2020-04-15 23:01:09 · 126 阅读 · 0 评论 -
React JSX表达式学习
学习目标 jsx表达式 ReactDOM.render React Jsx优点 jsx执行更快,编译为JavaScript代码时进行优化 类型更安全,编译过程中如果出错就不能编译,及时发现错误(解释型编译)。 JSX编写模版简单快捷。 React Jsx缺点 JSX必须有根节点(root) 正常的普通HTML元素要小写。如果是大...原创 2020-04-15 22:13:03 · 309 阅读 · 0 评论 -
认识React
学习目标了解React基本知识React是构建用户界面的JavaScript库,主要用于构建UI界面。Facebook在2013年开源。React 特点 声明式设计 高效,采用虚拟DOM实现DOM的渲染,最大限度减少DOM操作 灵活,与其他库灵活搭配使用。 JSX,俗称JS里面写HTML,JS语法的扩展。 组件化、模块化。代码易复用,2...原创 2020-04-15 19:35:05 · 154 阅读 · 0 评论 -
React-混合移动App开发介绍
学习目标了解混合移动App开发的相关背景 了解项目开发流程 了解三大框架什么是混合移动App开发? 苹果系统中的软件是如何被开发出来的:使用OC或者swift。 安卓平台中的软件是如何被开发出来的:使用安卓相关的语言,例如Java,安卓控件等。 苹果系统和安卓平台共有的软件是如何被开发的:例如,腾讯招2套开发人员【开发组】(一套负责苹果系统开发,一套负责安卓平台...原创 2020-04-15 16:23:35 · 1855 阅读 · 0 评论