react怎样封装一个组件
由于近期在涉及到封装组件的时候遇到了一些问题，于是我认真地了解了一下react封装组件过程中应该要涉及和思考到的一些问题，写了下来。（以下主要是针对UI组件，由于水平有限不保证内容正确性，仅仅是一些个人的思考）
一、什么是组件
组件可以将UI切分成一些的独立的、可复用的部件，这样就只需专注于构建每一个单独的部 ...
react 之getFieldDecorator用法
react ant Design组件官网地址：
https://ant.design/components/form-cn/#header
今天来讲下 getFieldDecorator 方法
**登陆注册表单制作时，除了可以引入UI样式，Ant Design 也提供了JS属性对象。**
// 获取 getFieldDecorator JS属性对象，这个值的作用是帮助我们做表单封装 const { getFieldDecorator } = ...
react.js antd-table 可编辑表格验证
最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是antd的组件,看了下table组件,官网有给编辑的例子,好咧,拿过来用了下,发现问题.官网的实现写得很复杂,而且最主要的一点是只能在输入框获取焦点时调验证规则.但是在表格外面不能调用验证方法调用.与实际需求不符合,于是自己写了一个,记录下来.
需求: 表 ...
tsx 编写react 遇见类型“Readonly<{}>”上不存在属性XXX解决办法
这样的问题是TS语法类型检测的时候会报错，这时候可以给state个props生命类型，问题解决，代码如下：
import React from "react";
type StateType = {
name: string;
number: number;
};
type propType = {
name: string;
number: number;
};
interface Test1 {
state: StateType;
props:propType
}
cla ...
react 国际化 react-i18next
重点：
动态切换语言，不刷新页面的情况下切换，无需redux（从官网文档找到）：
选择插件 react-i18next，
先安装npm install i18next react-i18next --save
然后引入依赖代码如下，
import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import { useTranslati ...
React面试题（超详细，附答案）
生命周期
组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数：shouldComponentUpdate
将要更新数据时触发的函数：componentWillUpdate
数据更新完成时触发的函数：componentDidUpdate
组件将要销毁时触发的函数：componentWillUnmount
...
8分钟为你详解React、Angular、Vue三大前端技术
【引言】
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
【React】
React（也被称为React.js或ReactJS）是一个用于构建用户界面的J ...
react react-router-config
https://www.npmjs.com/package/react-router-config
这是我的目录，router文件 index.js 就是我的路由文件。 assembly 是引入组件的地方，那里配了懒加载
第一步： 安装
npm install --save react-router-config
第二步： 外面 index.js 引入
import React from 'react';
import ReactDOM from 'r ...
基于React 的audio音频播放组件
基于React 的audio音频播放组件, 自定义播放/暂停按钮、进度条调节、音量调节、倍速播放。
组件代码：
AudioPlay.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
rateList: [1.0, 1.25, 1.5, 2.0],
playRate: 1.0 ...
create-react-app + Typescript脚手架搭建
1、创建使用ts的新项目
yarn create react-app my-test-app --template typescript
2、配置tsconfig.json
（1）在根目录下新建文件tsconfig.extend.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
}
}
（2）在tsconfig.json中新增
"extends": "./t ...
react更新渲染及渲染原理
一、element如何生成真实DOM节点
触发组件的更新有两种更新方式：props以及state改变带来的更新。本次主要解析state改变带来的更新。整个过程流程图如下：
1、一般改变state，都是从setState开始，这个函数被调用之后，会将我们传入的state放进pendingState的数组里存起来，然后判断当前流程是否处于批量更新，如果是，则 ...
React首次渲染过程
一、JSX如何生成element
这里是一段写在render里的jsx代码。
return (
<div className="cn">
<Header> Hello, This is React </Header>
<div>Start to learn right now!</div>
Right Reserve.
</div>
)
首先，它会经过babel编译成React.createElement的表达式。
return (
React.cr ...
React+Taro开发小程序实现左滑喜欢右滑不喜欢效果
序言：
年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件相关博客也比较少，加上公司任务比较紧，所以没做就搁置下来了。
利 ...
使用react context的作用React.createContext
前言：在实际开发项目的时候我们可能会经常碰到多层组件传值的情况，就是父组件的值传递给子组件。子组件再传递给下面的子组件，再传递给下面的子组件.......可能会遇到这个情况。
然而这个值，可能会只在最后的子组件使用到，那么这个时候使用createContext简直就是无敌的存在。
超级简单又方便，因为最进重构一个项目遇到 ...
React Native 架构一览
一.架构设计
整体上分为三大块，Native、JavaScript 与 Bridge：
Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：
最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来 ...
React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析
初学React Native，如果没有人指引，会发现好多东西无从下手，但当有人指引后，会发现其实很简单。这也是本人写这篇博客的主要原因，希望能帮到初学者。
本文不会介绍如何搭建开发环境，如果你还没有搭建，可参考这里的官方文档：https://react-native.org/doc/getting-started.html 。
本文也不会介绍各种组件，太多 ...
在React中使用Typescript
在React中使用Typescript
最近学习的技术发现TS越来越多,于是自己尝试做了几个Demo实战,发现TS上手不是很难,但是一旦出现错误很难百度到对应的文档,而且在react中也不会使用ts来编写
跟着这个文章走,内容可能会很长,一步一步去写,保证你的React项目可以使用TS来编写
本人写的一个 TS+Hooks简易版实战
1. 创建一个React的TS ...
React Hooks总结
Hook 前言
什么是Hook
自从 16.8 版本开始，hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性。
那么在 React Hooks 出现之前，class 类组件和 function 函数组件有什么区别？Hooks 出现之后，函数组件又是如何满足原来只有类组件才有的功能的？
1.类组件和没有 hooks 加持的函数组件：
函 ...
React拖拽组件react-sortable-hoc给子组件添加onClick失效问题
实现使用 react-sortable-hoc 插件
基本使用先见官网： https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=0ronzp
github地址：https://github.com/clauderic/react-sortable-hoc/blob/master/examples/basic.js
点击事件绑定不上的解决方案：https://github.com ...
React Context 的基本用法
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
1. 用法
React.createContext
const MyContext = React.createContext(defaultValue);
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前 ...
