react

React Purecomponent 的使用指南 来源： CSDN 作者： chris_z_0622 链接： https://blog.csdn.net/chris_z_0622/article/details/104339631

import './index.css'; 来源： https://www.cnblogs.com/sexintercourse/p/12315526.html

一、React框架概述 官网：https://reactjs.org/ 最新版V16.10 中文网：https://zh-hans.reactjs.org/ 中文社区网：https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/ 由Facebook维护的MVVM框架，官方定义自己是一个“用于构建UI的JS库”——核心概念很少；但生态圈扩展非常广泛，如 React-Router：路由、 Redux： 状态保持、 ReactVR/360： 虚拟现实、 ReactNative：使用JS做App原生开发... 来源： https://www.cnblogs.com/sna-ling/p/12315119.html

1.安装4.2.2版本的react-router-dom cnpm install react-router-dom@^4.2.2 --save 2.安装axios yarn add axios 3.安装4.1.0版本的less-loader cnpm install less-loader@^4.1.0 --save 4.安装后package.json文件如下 5.用yarn eject暴露webpack文件 yarn eject 暴露后会新增一个config文件夹为webpack的配置文件 6.通过yarn add less安装less 7.在webpack.config.js中可以修改配置例如支持less文件的加载修改以下内容在webpack.config.js中添加对less的解析 //解析less文件 { test: /\.less$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work //

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（ 原理 ） 1.通过yarn add babel-plugin-import 安装babel-plugin-import插件 yarn add babel-plugin-import 2.在webpack.config.js中添加如下代码进行配置antd的按需加载 ['import',{libraryName: 'antd',style:true}], 整体代码如下： 'use strict'; const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin =

1.父子之间的传值 父传子 父： 通过自定义属性进行传值 import React, { Component } from 'react'; import Son from './son' export default class father extends Component { render() { return ( <div> <Son toson="给儿子的"></Son> </div> ) } } 子：通过this.props.属性名进行接收 import React, { Component } from 'react' export default class son extends Component { render() { return ( <div> {this.props.toson} </div> ) } } 子传父 父 import React, { Component } from 'react'; import Son from './son' export default class father extends Component { getFromSon = (msg)=>{ //参数来自于儿子的数据 getMeg == getFromSon console.log(msg) } render() { return ( <div> <Son

React 中有约束性组件和非约束性组件 非约束性组件：使用 defaultValue 代表组件的值，react 不会管理该组件的输入过程 约束性组件：使用 value 代表组件的值，这个值不是写死的内容，需要给这个组件绑定 onChange 事件来管理这个组件的输入 主要了解各种表单控件如何作为约束性组件在 react 中进行管理, 完整例子附在最下方 text 将 value 属性绑定为组件的某个数据，如 例子中的 {this.state.name} , 当 name 值改变时，这个控件的 value 也会随之更新。绑定了一个动态的 value 值，就需要为它设置 onChange 事件，当该控件的内容发生改变时，就会触发 onChange 事件，在该事件中为 state 中的 name 字段重新赋值，从而改变该控件的 value 值，实现双向数据绑定 radio 在 react 中，我们不通过 name 属性来为单选框分组，我们通过进行一个等值判断来实现单选框的效果，如例子中 checked={this.state.sex === "1"} , 当指定值为 1 时，为选中状态，而不为 1 时，则为非选中状态。onChange 对应的事件用于将指定值设置为当前点击的选项的 value 值。 select select 需要配合 option 显示选项，我们将 option

受控组件 input中的value值通过state值获取，onChange事件改变state中的value值，input中的value值又从state中获取 非受控组件 非受控也就意味着我们可以不需要设置它的state属性，而通过ref来操作真实的DOM。 来源： CSDN 作者： 薛染 链接： https://blog.csdn.net/bobringtheboys/article/details/104295107

导入柱状图和折线图： import { BarChart, LineChart } from "@ui5/webcomponents-react-charts"； 在自定义的React Component里，为图标创建数据集和数据标签对应的JavaScript数组： 最后在React 自定义组件里，直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组： 最后的效果，折线图： 柱状图： 不出意外，还是通过canvas实现的： 要获取更多Jerry的原创文章，请关注公众号"汪子熙": 来源： https://www.cnblogs.com/sap-jerry/p/12303069.html

1.react中的事件 来源： https://www.cnblogs.com/nyhhd/p/12302489.html