一 函数式组件新能优化：https://mp.weixin.qq.com/s?__biz=MzI1ODk2Mjk0Nw==&mid=2247484774&idx=1&sn=9dc58e54a28755504d58bef49a78f3b4&scene=21#wechat_redirect React 性能优化的理念的主要方向就是这两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都...
引用 我最近在使用react写网页，有一个需求是：在前端读取本地的图片文件，在react组件中显示，并且对图片文件进行标记。标记的结果存在本地csv文件中。 因为只是本地读取，本地存储，所以整个流程都不涉及与后端交互，纯前端就可以完成。 效果实现 下面的实现只是思路以及核心代码，全部代码可移步Github。 为了使得标记可以自行修改，所以我把图片当作div的背景图片显示。标记当作div的p元素。render()函数很简单：render(){retu...
最近使用React Hooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示 ， 所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。 使用场景 任意包含表单的h5页面（使用zarm库，或自行适配自己的库） 目标代码实现简单和简洁 基于配置 新手上...
“关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来 ” 我觉得这句话说得很不错 一语道破mvvm的优势 我个人理解 并不是所有在项目中大量使用的组件都应该去提取出来 一味的追求更少的代码量反而会给代码未来的的维护造成困难， 我觉得应该被提取出来作为公共组件的应该是那些样式固定的（在整个项目中都必须统一的一个标准），非个性化的，更加解耦的（可能语言组织不够完美，...
使用函数创建组件 // 使用js中的函数创建的组件叫做:函数组件 // 函数组件必须有返回值 // 组件名称必须以大写字母开头,React据此区别组件和普通React元素 function Hello(){return (<div>这是我的第一个函数组件</div>) } ReactDOM.render( <Hello />,document.getElementById('root'))使用类创建组件 使用ES6的class创建组件类名称必须以大写字母开头类组件应该继承React.Component父类,可以使用父类中提供的方法或属性类组件必须...
父子组件间通信 这种情况下很简单，就是通过 props 属性传递，在父组件给子组件设置 props，然后子组件就可以通过 props 访问到父组件的数据／方法，这样就搭建起了父子组件间通信的桥梁。 import React, { Component } from 'react'; import { render } from 'react-dom';class GroceryList extends Component {handleClick(i) {console.log('You clicked: ' + this.props.items[i]);}render() {return (<div>{this.props.items.m...
/*** 1.子组件 child.js*/import React, { Component } from reactexport default class Child extends Component {constructor(props) {super(props)this.state = {}//如果父组件传来该方法 则调用方法将子组件this指针传过去if (props.onRef) {props.onRef(this)}}editRowEvt = (row) => {console.log(父组件调用子组件方法, row)} }/*** 2.父组件 parent.js*/import React, { Component } from react import ChildPage from ./c...
认识组件 react组件使用 import NameCard from './components/NameCard.js'; class App extends Component {constructor(props){super(props);this.state = {obj:{name:'std',number:123,}}}render() {return (<div className="App"><NameCard content={this.state.obj}></NameCard></div>);} }NameCard组件： render(){return (<div><h4>{this.props.content.name}</h4><ul><li>电话：{this.props.content.number}</li></ul></div...
React —— 组件实例的三大核心属性 state，props，refs React —— 组件实例的三大核心属性 state，props，refs一、statestate 介绍state 初始化1.借助类的构造器对state进行初始化2.简写正确地使用 state1. 不要直接修改 State2. State 的更新可能是异步的3. State 的更新会被合并，而不是覆盖实例 二、propsprops 介绍props 基本使用1.在组件中通过属性传入2.利用扩展运算符的简写3.在组件类定义中通过 this.props 读出props 限...
方式： props： (1).children props (2).render props 消息订阅-发布： pubs-sub、event等等 集中式管理： redux、dva等等 conText: 生产者-消费者模式 组件间的关系： 父子组件：props 兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)
问题 在React中使用new的方式创建Swiper轮播图，当组件卸载后给Swiper绑定的事件（SlideChange）还是会继续执行一遍，因为在事件中有更改state操作，所以当组件卸载后报错内存泄露。 当切换路由之后控制台就会报错 解决办法 想到两种办法解决，目前不知道为啥组件卸载后会执行slideChange事件。可能是我写法有问题？？？