随笔分类 -  react

摘要:0. 创建项目:npx create-react-app my-app 1. 样式: https://blog.csdn.net/weixin_37620905/article/details/865678612. componentWillReceiveProps(newProps) 组件接收到新 阅读全文
posted @ 2022-08-02 16:20 monkey-K 阅读(190) 评论(0) 推荐(0) 编辑
摘要:1. react antd-mobile 适配移动端 参考:https://www.jb51.net/article/215386.htm 1.报错:Error: require postcss-flexbugs-fixes use postcss 8 原因:postcss-flexbugs-fix 阅读全文
posted @ 2022-08-02 16:20 monkey-K 阅读(1891) 评论(0) 推荐(0) 编辑
摘要:https://juejin.cn/book/6945998773818490884/section/6948337148202319908 阅读全文
posted @ 2022-05-13 11:18 monkey-K 阅读(10) 评论(0) 推荐(0) 编辑
摘要:1. 父组件传递给子组件 通过 props 传递数据(状态,方法) 2. 子组件 -> 父组件 通过props传递给子组件方法,子组件通过 this.props.func 调用父组件方法改变父组件状态。 不同于 VUE 没有 emit。 3. 使用消息订阅模式 兄弟组件之间传参 pubsub-js 阅读全文
posted @ 2020-10-28 10:15 monkey-K 阅读(633) 评论(0) 推荐(0) 编辑
摘要:1. 路由传参: https://www.cnblogs.com/cckui/p/11490372.html 2. 代码: import React, { Fragment } from 'react'; import ReactDOM from 'react-dom'; import './ind 阅读全文
posted @ 2020-07-16 11:29 monkey-K 阅读(179) 评论(0) 推荐(0) 编辑
摘要:1. Fragment : 可以理解为空标签。 类似与 微信小程序的 <block> 2. 实例: import { Fragment } from 'react' class LI extends React.Component { constructor (props) { super(prop 阅读全文
posted @ 2020-06-17 15:22 monkey-K 阅读(142) 评论(0) 推荐(0) 编辑
摘要:1. 错误边界解决什么问题: 1. 解决错误边界组件内部子孙组件,出现加载错误【生命周期中】,用来优雅降级。显示错误边界组件提示的内容。 2. 错误边界无法捕获的场景: 1. 自身错误 2. 事件触发的错误 3. 异步错误(定时器,requestAnimationFrame 或者 异步请求) 4.  阅读全文
posted @ 2020-06-16 16:41 monkey-K 阅读(270) 评论(0) 推荐(0) 编辑
摘要:1. react 中的 context 使用了生产者消费者模式 【Provider和Customer模式】。 2. 可以在顶层的Provider中传入value,在子孙级的Consumer中获取该值,并且能够传递函数,用来修改context // 1. context.js 中 import Rea 阅读全文
posted @ 2020-06-11 16:34 monkey-K 阅读(155) 评论(0) 推荐(0) 编辑
摘要:1. react 支持 import('./utils.js') 返回一个 Promise 对象。 所以可以写成 import('./utils.js').then((util) => {util.add()}) 2. React.lazy 组件懒加载: 1. React.lazy() 接受一个函数 阅读全文
posted @ 2020-06-10 10:40 monkey-K 阅读(553) 评论(0) 推荐(0) 编辑
摘要:// 搜索框 class SearchBar extends React.Component { constructor (props) { super(props) this.handleChangeInput = this.handleChangeInput.bind(this) this.ha 阅读全文
posted @ 2020-06-09 16:22 monkey-K 阅读(502) 评论(0) 推荐(0) 编辑
摘要:说明:react 的组合相当于 Vue 中的插槽。 本质: React 元素本质就是对象(object),可以将任何东西作为 props 进行传递。组件可以接受任意 props,包括基本数据类型,React 元素以及函数 1. props.children -- 默认【插槽】: 组件内嵌套的 jsx 阅读全文
posted @ 2020-06-08 18:20 monkey-K 阅读(376) 评论(0) 推荐(0) 编辑
摘要:1. 什么是状态提升: 状态提升是指,公共父组件统一管理子组件状态的过程。 2. 为什么要做状态提升: 当两个子组件渲染同一个数据的不同状态时,并且要求两个子组件数据同步变化,子组件之间不能相互作用,这时,就需要提升到公共父组件处理要渲染的数据。 例如:官网 摄氏度和华氏度控制水沸腾的例子 3. 数 阅读全文
posted @ 2020-06-08 15:59 monkey-K 阅读(291) 评论(0) 推荐(0) 编辑
摘要:1. 受控组价: 由react的SetState() 来控制表单组件渲染,state是组件渲染的【唯一数据源】 通过一个案例来体验受控组件: 1. select 选中不能使用 selected 使用 value。 2. onChange 事件必须绑定 3. 多个表单组件使用 name 属性来区分。  阅读全文
posted @ 2020-06-04 19:02 monkey-K 阅读(173) 评论(0) 推荐(0) 编辑
摘要:1. 普通列表渲染 [1,2,3,4,5] function NumberList (props) { const numbers = props.numbers // key 必须有,否则产生警告。key 一般用id,提高渲染效率。万不得已使用 index const listItem = num 阅读全文
posted @ 2020-06-04 14:13 monkey-K 阅读(11657) 评论(0) 推荐(0) 编辑
摘要:1. if 条件渲染 function UserGreeting (props) { return <h2>用户登录</h2> } function GuestGretting (props) { return <h2>游客登录</h2> } function Greeting (props) { 阅读全文
posted @ 2020-06-04 10:29 monkey-K 阅读(168) 评论(0) 推荐(0) 编辑
摘要:1. 事件绑定方式一: 全局方法返回react dom 方式绑定 function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } // 使用 o 阅读全文
posted @ 2020-06-03 17:11 monkey-K 阅读(238) 评论(0) 推荐(0) 编辑
摘要:简述react的生命周期: react 的生命周期分为3个阶段:分别是挂载,运行中(渲染),和卸载 1. 挂载阶段 1.1 构造函数 constructor() 完成数据初始化,接受两个参数 props (传入的属性) 和 context(上下文对象),当在函数内部使用这两个参数必须使用 super 阅读全文
posted @ 2020-06-03 11:32 monkey-K 阅读(216) 评论(0) 推荐(0) 编辑
摘要:1. 组件中的 props 和 state : 1. props 是由父组件(父类)传入的, state 是完全受组件自己控制的 通过一个案例来熟悉 state , 两种不同的方式封装组件,一种使用 props 传递参数,一种使用 state 做到解耦的方式封装 案例一: props 传递参数方式: 阅读全文
posted @ 2020-06-02 18:43 monkey-K 阅读(271) 评论(0) 推荐(0) 编辑
摘要:1. 函数定义组件 // myComponent.js import React from 'react'; function MyCompoennt (props) { // props 为组件属性传入的参数 return <h1>{props.name} : 我的第一个函数定义的组件</h1> 阅读全文
posted @ 2020-06-02 15:54 monkey-K 阅读(224) 评论(0) 推荐(0) 编辑
摘要:1. react DOM 渲染: ReactDOM.render(reactDom, container) reactDom : DOM 片段 container: 放到哪个DOM容器中(父节点) const element = <h1>Hello, world</h1>; ReactDOM.ren 阅读全文
posted @ 2020-06-02 14:32 monkey-K 阅读(183) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示