Tsunami黄嵩粟 - 博客园

2021年4月22日

摘要：写入组件 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黄嵩粟阅读(88) 评论(0) 推荐(0)

react跨组件通信

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

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

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

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

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

2021年4月16日

react减少组件渲染

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

posted @ 2021-04-16 17:48 Tsunami黄嵩粟阅读(114) 评论(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黄嵩粟阅读(68) 评论(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黄嵩粟阅读(216) 评论(0) 推荐(0)

react表单处理非受控组件

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

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

react表单处理受控组件

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

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

react props-type

摘要：对于组件来说，props是外部传入的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据，如果传入的数据不对，可能会导致程序异常，所以必须要对于props传入的数据类型进行校验。安装校验包 npm i -S prop-types # 在组件中导入 im 阅读全文

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

react props进阶 children属性

摘要： children属性，表示组件标签的子节点，当组件标签有子节点时，props就会有该属性，与与普通的props一样，其值可以使任意类型。 # 父组件 class App extends React.Component { render() { return ( <div> <Cmp>我是childr 阅读全文

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