Tsunami黄嵩粟 - 博客园

2021年4月28日

摘要： react中通过npm来安装axios扩展 cnpm i -S axios 发起请求 import React, { Component } from 'react' import axios from 'axios' export default class App2 extends Compon 阅读全文

posted @ 2021-04-28 15:17 Tsunami黄嵩粟阅读(113) 评论(0) 推荐(0)

2021年4月22日

react祖先与子孙多层传值

摘要：先做数据源store.js文件 // 状态 store 统一数据源 import React, { createContext } from 'react' // Provider 发布消息 // Consumer 对于发布的消息进行消费(接受) let { Provider, Consumer } 阅读全文

posted @ 2021-04-22 18:09 Tsunami黄嵩粟阅读(240) 评论(0) 推荐(0)

react兄弟之间通信

摘要：写入组件 import React, { Component } from 'react'//下面二个就是兄弟关系的组件 import Cmp1 from '../Child/Cmp1' import Cmp2 from '../Child/Cmp2' import MyContext, { db 阅读全文

posted @ 2021-04-22 18:00 Tsunami黄嵩粟阅读(123) 评论(0) 推荐(0)

react跨组件通信

摘要：在react没有类似vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。 import React, { Component, createContex 阅读全文

posted @ 2021-04-22 17:49 Tsunami黄嵩粟阅读(233) 评论(0) 推荐(0)

react组件通信父组件与子组件互相通信

摘要：父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过t 阅读全文

posted @ 2021-04-22 17:16 Tsunami黄嵩粟阅读(180) 评论(0) 推荐(0)

2021年4月16日

react减少组件渲染

摘要：当this.setState()修改了state中的数据后，当前组件将重新渲染，同时也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件） shouldComponentUpdate 当父组件更新会引起子组件也被更新，问题是此时子组件没有任何变化时也会重新渲染，我们就要避免不必要的重新阅读全文

posted @ 2021-04-16 17:48 Tsunami黄嵩粟阅读(145) 评论(0) 推荐(0)

react生命周期比较常用的几个

摘要： import React, { Component } from 'react' // 只有在类组件中才有生命周期 export default class App extends Component { // 组件初始化只执行一次 constructor(props) { super(props 阅读全文

posted @ 2021-04-16 17:37 Tsunami黄嵩粟阅读(99) 评论(0) 推荐(0)

react做购物车的功能

摘要：父组件 import React, { Component } from 'react' import Lists from '../components/Lists' export default class Cart extends Component { // 数据状态 state = { 阅读全文

posted @ 2021-04-16 17:31 Tsunami黄嵩粟阅读(229) 评论(0) 推荐(0)

react表单处理非受控组件

摘要：没有和state数据源进行关联的表单项，而是借助ref，使用元素DOM方式获取表单元素值使用步骤调用 React.createRef() 方法创建ref对象将创建好的 ref 对象添加到文本框中通过ref对象获取到文本框的值 class App extends React.Component 阅读全文

posted @ 2021-04-16 17:18 Tsunami黄嵩粟阅读(66) 评论(0) 推荐(0)

react表单处理受控组件

摘要：将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。绑定步骤：在state中添加一个状态，作为表单元素的value值给表单元素绑定change事件，将表单元素的值设置为state的值 <input type="text" value={this.s 阅读全文

posted @ 2021-04-16 17:08 Tsunami黄嵩粟阅读(94) 评论(0) 推荐(0)