react复习总结（1）--react组件开发基础

这次是年后第一次发文章，也有很长一段时间没有写文章了。准备继续写。总结是必须的。

最近一直在业余时间学习和复习前端相关知识点，在一个公司呆久了，使用的技术不更新，未来真的没有什么前景，特别是我们这种以技术能力吃饭的人。所以至少要做到每段时间学习一些新东西（指以前自己不了解的知识），特别是在一个地方呆久了，习惯了现在的技术栈和工具，想要适应以后的发展就没那么容易了。

最近在看的知识点是react相关，现在工作用到的是es5原生模式的react组件开发，主要也只开发业务组件，对技术的门槛不高，纯属于适应需求即可。项目采取的是多页面开发，非单页，没有使用到react-router和redux。如果想跳槽没有这2个以及更多的插件的使用和开发经验，很难成功。所以也是必学的。

我们先来说一下es5的组件开发模式：

使用React.createClass创建组件，组件拥有状态和生命周期，this自动绑定了组件的实例。

（注：使用该方式需要相对比较低的react版本）

初始化state使用getInitialState。

this自动绑定当前组件实例。

es6方式创建组件：

初始化state使用构造函数constructor。

this需要手动绑定组件实例。或者使用箭头函数，或者使用bind(this)

普通无状态组件：

直接使用function，无状态和生命周期。适用于静态，可传props。

改变输入框内容：

展示：

输入框内容可改变。

代码：

使用onChange事件触发，获取最新的e.target.value的值改变state

setState传递方式不同，结果不同：

效果：

点击时，上一个只执行了最后一个，下一个2个都执行了。说明，使用函数的方式传入的state是最新的进行调用。

代码：

转载于:https://www.cnblogs.com/wuhairui/p/10367620.html

react复习总结（1）--react组件开发基础相关推荐

【精讲】vue组件开发基础、多层嵌套（内含详细注释）、vuecomponent构造函数
目录 vue组件开发基础多层嵌套(内含详细注释) vuecomponent构造函数第一部分:vue组件开发基础 <!-- vue中使用组件的三大步骤: 一 , ...
c# 无法加载oraops.dll_Robotstudio软件二次开发：基于C#语言的Smart组件开发基础
Robotstudio软件除了支持Add-Ins插件的二次开发以外,还支持Smart组件的二次开发.开发语言同样是基于.NET框架的C#语言或VB语言.Smart组件是Robotstudio软件中实现 ...
c#获取autocad安装位置_Robotstudio软件二次开发：基于C#语言的Smart组件开发基础
Robotstudio软件除了支持Add-Ins插件的二次开发以外,还支持Smart组件的二次开发. 开发语言同样是基于 .NET框架的C#语言或VB语言. Smart组件是Robotstudio软件 ...
Robotstudio软件二次开发：基于C#语言的Smart组件开发基础
目录一.开发环境配置二.开发项目创建三.代码编写四.项目编译五.运行测试
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
【天赢金创】我是如何看待React 组件开发
从 auto-ellipsis 看 React 组件开发 auto-ellipsis 是一个用于解决文本超长溢出截断并加 ... 的 React 组件. 关于 React 随着 React 的火热,随 ...
react 组件连动效果_React组件开发中常见的陷阱
React作为使用最广泛Web前端开发之一,在Web开发领域越来成熟和稳固.其新版本发布的Hook API/concept使得组件更加便捷易用.虽然如此,React开发中仍然有很多的陷阱值得每一位Re ...
Vite + React 组件开发实践
简介: 毫不夸张的说,Vite 给前端带来的绝对是一次革命性的变化.或者也可以说是 Vite 背后整合的 esbuild . Browser es modules.HMR.Pre-Bundling 等 ...

react复习总结（1）--react组件开发基础

react复习总结（1）--react组件开发基础相关推荐

最新文章

热门文章