肥林の仓库

React学习笔记 - 生命周期(旧) 官方文档 因为我之前学习过Vue,我可以将React中的生命周期与Vue联合在一起,所谓生命周期,它都是一个过程,一些函数,它所代表的是组件从创建到死亡它会经历一些特定的阶段。React,组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件的时候,可以在这些特定的生命周期回调函数中,做特定的工作,如:请求数据,修改数据,数据校验等…. 简单来讲,React中的生命周期基本可以分为三个阶段: 初始化阶段 –> 数据更新阶段 –> 组件卸载阶段 生命周期(旧)1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() /* 组件初始化时只调用，以后组件更新不调用， 整个生命周期只调用一次，此时可以修改state。 在渲染前调用,在客户端也在服务端。(后续可能会被弃用) */ 3.render() 常用 /* ...

React中的插槽 官方文档 React中其实是没有插槽这个概念的,只不过我们之前学习Vue的时候,Vue中给我们内置了一个API那就是插槽(slot),React中的插槽与Vue中的插槽是十分类似的,同样是用于组件中的内容(DOM)拓展,代码复用等,我们可以再一个组件中引用另一个组件的时候给它的内部包入其他的内容(DOM)结构,这样我们就可以避免一些不必要的组件间的数据通信,总之就是一句话,提升代码的复用性 实现原理其实同样是使用props 1. 默认插槽 通过组件标签体传入结构，固定写法props.children // 默认插槽import React, { Component } from 'react'// 子组件class Son extends Component{ render(){ console.log('成功接收到父组件插入到子组件中的插槽数据:',this.props.children); return ( <d ...

Context非父子组件间通信 React中的非父子传参一般有三种方法,第一种是中间人方法,就是比如兄弟组件间通信,就是通过一个子组件传数据给两个子组件组件的共同父组件,再通过这个共同的父组件传给另一个子组件,这种方法与Vue中的实现非常的相似,但是也非常的不推荐使用,因为使得代码非常的冗余。第二种方法就是消息的订阅与发布,与Vue中的事件总线也非常的相似,也不是很推荐使用,第三种方法则是官方推荐的使用的跨级通信方法:context React提供了一个API：Context； Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props； Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言； Context相关API1. React.createContext(相当于Vue创建全局的事件总线) 创建一个需要共享的Context对象： 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值； defaultValue是 ...

React学习笔记(7) - 父子通信 在React中,父子组件间的通信是非常常见的问题,除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。 1. 父组件向子组件通信 父组件项子组件通信中最常见的办法就是通过props(属性),代码如下: import React, { Component } from 'react'import myPropTypes from 'prop-types'// 引入属性验证库(propTypes,引入名字可以随便取)// 组件间通信: 父传子使用属性(props) // 子组件class Son extends Component { /* 1.属性验证(static:表示静态属性,意味着这个类不需要实例化也能读取到里面的属性) 这种方法推荐使用 */ static propTypes = { ...

函数式组件中的属性(props) 函数式组件中的props(属性)与类组件还是有点不同的,因为函数式组件没有this指向,但是却可以有形参传入,因此props属性就是以形参传入的方式传递给子组件的,且函数式组件设置属性默认值和属性验证的方式与类组件的第二种方法非常的相似,都是以函数式组件名.defaultProps设置默认属性和以函数式组件名.propTypes设置属性校验,如下所示: 代码展示 父组件 import React, { Component } from 'react'import Naviber from './Naviber'//类组件import List from './List'//函数式组件export default class App extends Component { render() { // 使用props(属性)传值(父组件通过key=value的形式传值给子组件)类似于Vue的props return ( <d ...

React学习笔记(5) - 类组件中的属性(props) React中的属性(props)与Vue中的父子组件间通信(props)非常的相似,使用方法也非常的相似,都是通过在父组件中调用子组件,随后在父组件中,通过key="value"或者key={value}的方式将属性(props)传给子组件,随后子组件再通过this.props来接受父组件传过来的属性。但是,props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，也就是说,你可以认为在子组件中,父组件传过来的属性(props)是只读的(readonly),子组件不能更改这个属性,但你可以通过父组件主动重新渲染的方式来传入新的props,属性是描述性质、特点的，组件自己不能随意更改。 代码展示: 父组件 import React, { Component } from 'react'import Naviber from './Naviber'export default class A ...

react学习笔记(4) - ref属性以及状态初体验ref属性 在我看来,react中的ref属性与Vue中的ref属性是十分的相似的,两者的功能斗鱼原生js中的id选择器非常的相似,都是用于定位一个目标(容器)使我们可以通过这个ref属性去操作这个目标,在组件内的标签可以定义ref属性来标识自己(Vue,React) 使用方法: 老版本使用(不推荐使用,后续会被淘汰) 1. 给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 import React, { Component } from 'react'export default class App extends Component { render() { return ( ...

React组件的学习笔记(3) - 事件处理1. 绑定事件 采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick,React里的事件是驼峰onClick,React的事件并不是原生事件，而是合成事件。 2. 回顾一下this的指向问题 在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。 在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。 普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window,但是可以使用call, apply, bind来改变它的this指向。(下面代码的方法二) 箭头函数: 箭头函数没有this指向,它会捕获自己定义所处的外层执行环境，并且继承这个this值,指向当前定义时所在的对象。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变(无法使用 call, apply, bind 来改变它的指向)。箭头函数的this指向于函数作用域所用的对象。 ...

React组件的学习笔记(2) - 组件的创建1. 类组件(Class) ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承，ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码： 代码展示: classComponent.js组件 /* ---------------------- React中的类组件(class) ------------------------- *//* ------------------- 复习es6中的类知识 -------------------- */ // 定义一个类class Test { constructor(){//构造函数实现属性的动态赋值 this.a = 1 } testA(){ // 类中的公共方法A console.log('test A'); }}// 继承一个类class childrenTest ...

初识React 官方文档 React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面UI的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 react的特性 虚拟DOM 创建第一个React项目 全局安装create-react-app npm install -g create-react-app 创建一个React项目 create-react-app myapp 项目生成后，默认目录结构包含: public和src两个文件夹 ，其中public里的index.html是整个项目的首页，最终所有的组件内容会挂载到这个页面中；src下面就是我们编写组件的地方，默认里面有index.js文 ...