前端博客典中典

一、React Native 是干嘛的？React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。二、React Native基本原理？React Native = JavaScriptCore + React + BridgesJavaScriptCore负责JS代码解释执行。React负责

开发环境搭建

高阶组件：高阶组件就是一个接收一个组件并返回另外一个新组件的函数！ 高阶组件总共分为两大类 一、代理方式（1、操纵 prop 2、抽取状态 3、包装组件） 1、操纵 prop 增加prop import React from 'react' const HocAddProp = (WrappedComponent，uid) => class extends React.Component { render() {

为了更好的支持异步渲染（Async Rendering），解决一些生命周期滥用可能导致的问题，React 从 V16.3 开始， 对生命周期进行渐进式调整，还对生命周期加入了错误处理。 React 16.3 新增的生命周期方法 1. static getDerivedStateFromProps() 2. getSnapshotBeforeUpdate() 3. componentDidCatch() 逐渐废弃的生命周期方法： 1. componentWillMoun

需求：要求所有的input框提交前自动去除首尾空格，全部都是空格就全部去除。 最简单的办法是在提交前对数据作处理，但是这样会带来很多的重复性工作，所以需要把这层逻辑抽取出 来。一、React的做法目前用的是
React
开发，而
React
并没有原生提供类似功能，使用的
Antd
也没有提供，需要我们 自己封装。 如果都是
Input
组件，我们直接封装一层，加上去除首尾空格的逻辑即可。 去除的最佳时机应该是输入框失去光标的时候，所以应该监听
blur
事件。具体代码如下：import React

一、需求二、组件封装BatchInputNumber.jsimport React, { PureComponent, Fragment } from 'react';import moment from 'moment';import { Form, Row, Col, InputNumber, Icon, Button, message } from 'antd';import styles from './index.less';const FormItem = Form.Item;

一、需求二、组件封装import React, { PureComponent, Fragment } from 'react';import moment from 'moment';import { Form, Row, Col, DatePicker, Icon, Button, message } from 'antd';import styles from './index.less';const FormItem = Form.Item;const RangePicker =

一、需求二、组件封装BatchTime.jsimport React, { PureComponent, Fragment } from 'react';import moment from 'moment';import { Form, Row, Col, TimePicker, Icon, Button, message } from 'antd';import styles from './index.less';const FormItem = Form.Item;// 判断时

一、需求弹框选择：二、组件封装import React, { PureComponent } from 'react';import PropTypes from 'prop-types';import { Row, Col, Modal, Input, Button, Divider, Card, Table, message } from 'antd';import styles from './index.less';const Search = Input.Search;cl

搜索条件topBase：[ { "label": "影片名称", "key": "film", "type": "input", "placeholder": "请输入影片名称", "default_value": "无间道", "value_options": [], "required": true }, { "label": "城市单选",

拖拽标题及拖拽表头antd拖拽标题实现添加功能

【react插件】react-particles-js 背景粒子效果的实现1 安装2 使用react-particles-js 背景粒子效果的实现1 安装$ cnpm install --save react-particles-js2 使用import Particles from 'react-particles-js';class App extends Component { render() { return ( <Pa