![](https://img-blog.csdnimg.cn/8542d47c647c4115a202a614eff71174.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React16
react16
richest_qi
这个作者很懒,什么都没留下…
展开
-
【redux】react-redux与reselector
import {connect} from "react-redux";function List(props){ return ( <ul> { props.list.map(item => <ListItem key={item.id} {...item}/>) } </ul> )}const mapStateToProps原创 2020-09-25 20:47:13 · 404 阅读 · 0 评论 -
动态导入
第一种,async/await + import()async function getComponent(){ const component = await import( /*webpackPreload:true */ `./${self.props.dirname}/app.js`); return component.default || component;}getComponent().then(App => { R原创 2020-09-25 20:47:58 · 166 阅读 · 0 评论 -
【react-redux】模拟react-redux的connect函数
//store.jsimport {createStore} from "redux";import reducer from "./reducer.js";const values = [1,10];export default createStore(reducer,values);//connect.jsimport React from "react";import store from './store.js';const f = () => ({});const co原创 2020-08-12 11:47:20 · 175 阅读 · 0 评论 -
【react-router】Redirect组件
import React from "react";import { BrowserRouter as Router, Route, Link, Redirect} from "react-router-dom";export default function App() { return ( <Router> <ul> <li><Link to="/home">Home<原创 2020-08-09 11:45:26 · 385 阅读 · 0 评论 -
【react-router】Route组件
import React from "react";import { BrowserRouter as Router, Redirect, Link, Route, Switch, useParams, useLocation, useRouteMatch} from "react-router-dom";export default function App() { return ( <Router> &l原创 2020-08-09 10:41:08 · 1536 阅读 · 3 评论 -
【react-router】嵌套路由
import React from "react";import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams} from "react-router-dom";export default function App() { return ( <Router> <div> <ul>原创 2020-08-07 10:39:03 · 582 阅读 · 0 评论 -
【React】defaultProps
// index.jsimport React from 'react';import ReactDOM from 'react-dom';import Helloworld from "./helloworld.js";ReactDOM.render( <Helloworld/>, document.getElementById('root'))//helloworld.jsimport React from 'react';class Helloworld原创 2020-08-03 09:30:05 · 204 阅读 · 0 评论 -
【React】安装react devtools
1,下载crx格式文件,下载地址:https://pan.baidu.com/s/1ND_HsvDMnWDPo332UDLZPQ2,进入 更多工具>扩展程序,直接将crx文件拖入,报错:程序包无效 CRX_HEADER_INVALID 解决方法:将文件后缀 .crx 修改为 .rar 或 .zip,然后解压到文件夹;在扩展程序中加载该已解压的文件夹3,重新打开Chrom...原创 2019-11-22 12:40:54 · 170 阅读 · 0 评论 -
【React】setState
setState原创 2020-07-28 16:06:37 · 157 阅读 · 0 评论 -
【React】组件
无状态组件class 组件import React from "react";import ReactDOM from "react-dom";class Helloworld extends React.Component{ render(){ return <p>Hello world</p> }}ReactDOM.render( <Helloworld />, document.querySelecto原创 2020-07-25 15:15:19 · 102 阅读 · 0 评论 -
【react-router】上手react-router
//index.html<body><div id="root"></div></body>//index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./app.js";ReactDOM.render(<App/>, document.querySelector('#root'));//app.jsimpor原创 2020-07-22 14:48:48 · 189 阅读 · 0 评论 -
【React+Webpack】上手示例
创建项目根目录mdir democd demo创建package.jsonnpm init -y安装需要的包npm install --save-dev webpack webpack-clinpm install --save-dev html-webpack-plugin clean-webpack-plugin webpack-dev-servernpm install --save-dev babel-loader @babel/core @babel/preset-.原创 2020-07-20 11:55:43 · 119 阅读 · 0 评论 -
【React】组件复用
以函数为子组件在上手JSX(2)这篇文章里有提过 以函数为子组件 的模式。以函数为子组件的模式可以非常灵活地实现代码复用。有多灵活?看个例子就能感受到了。Mouse,将被复用的组件,用于记录鼠标的位置坐标//mouse.jsimport React from 'react';class Mouse extends React.Component{ constructor(props){ super(props); this.state = {原创 2020-07-19 14:50:25 · 343 阅读 · 0 评论 -
【React】Context实现数据共享:购物车实例
以下代码实现了购物车的部分功能,本文旨在体现 context在数据共享方面所能发挥的作用。使用props层层传递handleIncrement和handleDecrementindex.jsimport React from 'react';import ReactDOM from 'react-dom';import Cart from "./cart.js";ReactDOM.render( <Cart />, document.querySelector(原创 2020-07-17 15:04:13 · 378 阅读 · 0 评论 -
【React】shouldComponentUpdate与React.PureComponent
UI=render(data),你负责提供data,React负责render。React的工作就是渲染,就是操作DOM,而且是很有智慧地操作DOM。组件的state或props变化时,React会比对这次虚拟DOM和上次虚拟DOM,然后根据二者的不同,来操作真实DOM。index.jsimport React from 'react';import ReactDOM from 'react-dom';import CountDown from "./countDown.js";React原创 2020-07-16 18:04:05 · 373 阅读 · 0 评论 -
【React】非受控组件
DOM这块是非之地,React并不想涉足其中,所以更多时候会我们会使用 受控组件。但是,如果想蹚浑水,非 操作DOM 不可,React也提供了ref这一解决方法,即 非受控组件。我们来感受下 React组件的控制权一点点被剥夺后 有啥不同。React掌控全局<select value={this.state.value}><select/>,组件状态state同步记录<select>的value值,此时<select>受控,React掌控全局。in原创 2020-07-14 15:42:20 · 744 阅读 · 0 评论 -
【React】Context实现组件间数据共享
共享数据Support for the experimental syntax 'classProperties' isn't currently enabled@babel/plugin-proposal-class-propertie样例代码结构index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from "./components/app.js";ReactDOM.rende原创 2020-07-07 13:56:12 · 1328 阅读 · 0 评论 -
【React】包裹多个JSX元素
Fragments不论function组件,还是class组件的render函数,都必须返回一个JSX元素,也只能返回一个JSX元素。返回多个JSX元素是不合法的,这时可以用一个外层的标签把所有内容包裹起来再返回。要返回多个JSX时,我常用<div>来包裹,然而这并非我所愿。因为额外的<div>在整个html结构中是没有任何意义的,它只会让结构变得臃肿。好了,遇到了一个好用的东西—Fragments。<body> <div id="root">原创 2020-06-19 12:18:23 · 1220 阅读 · 0 评论 -
【React】实例:实现一个可搜索的产品数据表格
react哲学原创 2020-06-18 15:46:01 · 1356 阅读 · 0 评论 -
【React】提取组件与状态提升
数据一致性唯一数据源state组件将共享的状态放到最近的共同的父组件中管理,叫做状态提升。代码上有两点变化:const {temperature}=this.state; >>const {temperature}=this.props;this.setState({temperature:e.target.value})>>this.onTemperatureChange(e.target.value)这时,temperature不再由组件内部状态维护,组件失去控制原创 2020-06-15 16:01:00 · 322 阅读 · 0 评论 -
【React】受控组件
表单组件非受控组件受控组件原创 2020-06-12 17:43:44 · 261 阅读 · 0 评论 -
【React】列表组件与key
列表组件为什么需要keykey是给React看的,不是给组件看的key应该放哪儿例1:key在<li></li>上import React from "react";import ReactDOM from "react-dom";const numbers = [1,2,3,4,5];function NumberList(props){ const listItems = props.numbers.map(number =>原创 2020-06-09 11:46:38 · 243 阅读 · 0 评论 -
【React】props实现父子组件间通信
import React from "react";import ReactDOM from "react-dom";const element = <h1>hello world</h1>;ReactDOM.render(element,document.querySelector('#root'));ReactDOM.render把React元素element渲染到了根DOM上div#root。React元素一旦渲染成了DOM元素,就不可更改了。呃,如果想更新,该怎么原创 2020-06-04 16:42:48 · 249 阅读 · 0 评论 -
【React+JSX】上手JSX
JSX中可以使用任意形式的javascript表达式,只需要用一个{}把它们括起来就行。原创 2020-06-03 11:29:11 · 184 阅读 · 0 评论 -
React的事件处理
一个简单的例子//Button.jsimport React from "react";import ReactDOM from "react-dom";class Button extends React.Component{ handleClick(e){ console.log(e); console.log("hello world"); } render(){ return <button onClick={t原创 2020-06-01 14:56:46 · 233 阅读 · 0 评论 -
ECharts+React+webpack实现动态曲线
文章目录代码结构详细代码浏览器端实现chart组件button组件worker组件其他服务器端实现之前ECharts+js实现了动态曲线,这次稍稍做了一些改动。代码结构详细代码浏览器端实现chart组件MyChart.jsimport React from 'react';import * as echarts from 'echarts/lib/echarts';import 'echarts/lib/chart/line';import 'echarts/lib/compon原创 2020-05-28 18:57:37 · 396 阅读 · 0 评论