react 中事件处理-编程思维

不要问自己需要什么样的人生,而要问自己想要成为什么样的人。 我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的,还应该样式和 Javascript 逻辑的。这里我们认识逻辑构造之事件处理。 1. React 事件处理 这里列举了在 React 中事件的几种绑定处理方式: import React, { Component } from "react"; class Ap

react学习笔记18-非受控组件-编程思维

1.非受控组件的定义 非受控组件即状态不是完全由React的state来控制的组件 React要编写一个非受控组件,可以 使用 ref 来从 DOM 节点中获取表单数据,就是非受控组件。 import React, { Component } from 'react' export default class App extends Component { myusername =

react学习笔记19-受控组件-编程思维

1.受控组件的定义 React组件的数据渲染是否被调用者传递的 props 完全控制,完全控制则为受控组件,否则非受控组件。即React 的 state 成为组件的唯一数据源。   下面用一个小案例来演示,案例中todolist组件的唯一数据源就是State,todolist组件就是一个受控组件 import React, { Component } from 'react' import

react学习笔记20-父子通信(子传父)-编程思维

在React中子组件给父组件传参通过回调函数来进行。 父组件给子组件传递一个回调函数作为属性。 子组件在需要传递参数的地方调用父组件传递的回调函数即可。 import React, { Component } from 'react' class Navbar extends Component { render() { return ( <

react学习笔记21-非父子通信(状态提升)-编程思维

1.状态提升(中间人模式)的定义 React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件 上.在父组件上改变这个状态然后通过props分发给子组件。 2.状态提升的使用 简单讲解一下下面的代码,下面模拟了一个电影列表和详情页面。 进行通信的是列表的item和详情组件。 可以看到先在父组件APP中进行ajax请求拿到所有的列表item数据,然后通过父传子传给item,

react学习笔记22-订阅发布模式-编程思维

1.订阅发布模式的定义 订阅发布模式简单来说就是订阅者进行订阅,发布者进行发布,发布者发布时会通过调度中心通知到每一个订阅者。订阅者根据发布的内容选择是否进行对应的操作。 2.实现一个最简单的订阅发布 订阅发布模式的核心就是调度中心。一个最简单的调度中心里面应该具有三个要素 订阅方法,发布方法,回调方法数组。 订阅方法用来给订阅者进行订阅。在订阅时订阅者至少应该传递一个回调函数,用来在收到消息时

react学习笔记16-属性props-编程思维

1.属性的定义 props 是正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更 改,但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流 2.属性的特点 属性是描述性质、特点的,组件自己不能随意更改,必须由父组件进行更改 3.属性的用法 在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props

react学习笔记17-属性vs状态-编程思维

相似点: 都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同) 不同点: 1. 属性能从父组件获取,状态不能 2. 属性可以由父组件修改,状态不能 3. 属性能在内部设置默认值,状态也可以,设置方式不一样 4. 属性不在组件内部修改,状态要在组件内部修改 5. 属性能设置子组件初始值,状态不可以 6. 属性可以修改子组件的值,状态不可以   state 的主要作用是

react学习笔记15-13-setstate同步异步问题-编程思维

先说结论: setState处在同步的逻辑中会异步更新状态,更新真实dom。 连续调用 setState 不会连续进行虚拟dom的对比和页面的更新 setState处在异步的逻辑中,同步更新状态,更新真实dom。   1.同步状态 先看同步状态 /* eslint-disable react/no-direct-mutation-state */ import React, { Compon

react项目中webpack的配置过程-编程思维

初始化一个web项目 使用npm init -y 初始化一个项目 在项目目录下创建src, dist文件夹,创建webpack.config.js配置文件 然后在src文件夹下创建index.js, index.html文件 然后安装依赖包 npm i jquery -S 安装jQuery包 npm i webpack webpack-cli webpack-dev-server html-

react学习笔记05-类组件-编程思维

ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承, ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码 import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component {

react学习笔记07-组件嵌套-编程思维

一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar extends Component { render() { retur

react学习笔记08- 组件的样式-编程思维

1.使用行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方,例如 ren

react学习笔记09- 事件处理-编程思维

React采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写 onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。   事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法,然后在render里直接使用 onClick= {this.handleClick.bind(this)} (不推荐

react学习笔记10- ref的应用-编程思维

用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象   写法 import React, { Component } from 'react' export default class

react学习笔记11-状态(state)-编程思维

状态就是组件的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态 的目的就是为了在不同的状态下使组件的显示不同(自己管理)  定义状态的方法  可以在构造函数中定义也可以直接在类中通过变量的形式来定义 /* eslint-disable eqeqeq */ import React, { Component } from 'react' export default class

react学习笔记12-循环渲染-编程思维

在vue中我们一般是通过v-for指令来进行循环渲染的,但react中没有封装相关指令供我们调用 在react中我们可以通过数组的map方法来进行数据的循环渲染 import React, { Component } from 'react' export default class App extends Component { constructor() { su