![](https://img-blog.csdnimg.cn/20200223130036514.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React.js
介绍 React 相关知识,以及开发中的注意点。
fewuliu
决定一个人成功与否的因素不是你现在站立的高度,而是你的触底反弹力。
展开
-
React.js——初识Hook
Hook Hook的意义就是让函数组件也能使用state,以及进行一些state的操作State Hook State Hook在函数组件中的具体表现形式是通过使用userState Hook 例如: import React, { useState...原创 2019-10-23 22:20:09 · 345 阅读 · 0 评论 -
React.js——事件处理
调用事件类似于原生的点击事件onclick=“event()”,React中通过onClick={function}的形式来实现事件处理。例如: <div onClick={this.handler}>click me</div>需要注意的是,开发中需要调用的事件处理函数,一般存在于组件中,而要调用是事件处理函数,则需要通过this.函数名来调用该函数。但是由于J...原创 2019-07-09 23:46:20 · 194 阅读 · 0 评论 -
React.js——受控组件||非受控组件
区别受控组件:需要为每一个组件动态的绑定state中的变量,并且需要为数据变化添加相应的事件处理函数。非受控组件:则不需要为组件动态地绑定state中的变量,也不需要为数据变化添加事件处理函数,通过将数据交给React组件来实现为数据变化相应的事件处理函数。非受控组件class Form extends React.Component { constructor(props...原创 2019-07-14 21:28:46 · 270 阅读 · 0 评论 -
React.js——列表渲染
前言同样是列表渲染,React.js个人认为略显笨拙…相比较Vue.js,可能不会太友好,但是确实ES6的语法写起来很爽…哈哈基本格式函数式列表组件(举例)写法一function list(props) { const numbers = props.numbers; var listItems = numbers.map((numer) => <li k...原创 2019-07-11 23:22:01 · 337 阅读 · 0 评论 -
React.js——开发要点&&优化(一)
import()对代码进行分割实现代码分割的最佳方式则是通过动态import()语法例如: import Demo from './Demo'; function DemoFather() { return ( <div> <Demo/> </div> ); }React.lazy动态引入组件Reac...原创 2019-07-18 20:54:36 · 183 阅读 · 0 评论 -
React.js——开发要点&&优化(二)
组件更新的优化开发当中存在这样的场景比如,我已经得到的一个组件中渲染了,另一个组件渲染后,前一个组件也会随着更新,这个势必会影响性能,React提供了shouldComponentUpdate(nextProps, nextState)来解决这类问题基本语法: shouldComponentUpdate(nextProps, nextState) { return true; }...原创 2019-07-19 23:41:58 · 154 阅读 · 1 评论 -
React.js——生命周期
前言:对应React组件的生命周期,其实还是略带困惑…因为官网的文档竟然没有明确一个模块来讲解组件的生命周期…不过没有明确并不是代表不重要,开发中可以说非常重要!基本的生命周期函数componentWillMount、componentUnMount、componentDidMount、shouldComponentUpdate、componentWillUpdate、componentD...原创 2019-08-24 22:46:28 · 331 阅读 · 0 评论 -
React.js——初识Redux
前言学过Vue的都知道,Vue的全局状态管理是由Vuex完成的。同样的React也有属于它的全局的状态管理,最著名的就是Flux和Redux,并且作为Flux之后出现的Redux,完美的接触了Flux的优点,并很好的弥补了Flux的不足。而Redux则由:Action、Reducer、Store组成。ActionReducerStore...原创 2019-08-25 00:01:29 · 178 阅读 · 0 评论 -
React.js——Redux同步操作
前言每每提到Redux都会想起Vuex,相比起Vuex,Redux确实抽象了一些。官方文档给的入门的DEMO中的todoList,其中很多的代码逻辑都得自己去梳理。容器组件和展示组件Redux的React绑定库是基于容器组件和展示组件相分离的开发思想。展示组件 作用:描述如何展现骨架、样式 直接使用Redux:否 数据来源:props 数据修改:从props调用回调函数 调用...原创 2019-08-27 19:07:09 · 882 阅读 · 0 评论