![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
Rowrey
这个作者很懒,什么都没留下…
展开
-
react 初始化项目-创建表单
import React from 'react'class Login extends React.Component{ constructor(props){ super(props); this.state = { userName: "", password: "" } } onChange = (e) => { this.setState({ [e.target.name] = e.target.value }) } onSubmit = (原创 2021-02-19 16:13:51 · 467 阅读 · 0 评论 -
react 初始化项目-创建路由
1,删除app.js及相关引入,2,新建router.jsimport React from 'react'import { Route } from 'react-router-dom'import xxx from '组件'export default ( <div> <Route exact path='/' component='组件1'></Route> <Route exact path='/xxx' component='组件2'原创 2021-02-19 14:37:52 · 279 阅读 · 0 评论 -
react 初始化项目-仓库和中间件的引入
1,初始化项目npx cerate-react-app reactnamecd reactnamenpm run start2,安装插件npm install --save redux react-reduxnpm install --save-dev redux-logger redux-devtools-extensionnpm install --save redux-thunk3,新建reducers文件夹auth.jsconst auth = (state = {},act原创 2021-02-19 14:13:46 · 140 阅读 · 1 评论 -
react 高阶组件
高阶组件:1,必须是一个函数2,参数是一个组件3,返回值也是一个组件1,代码示例:import React,{Component} from 'react'const withFatch = (url) => (View) => { return class extends Component { constructor(){ super(); this.state = { loading: true, data: null } }原创 2021-02-08 10:29:50 · 109 阅读 · 0 评论 -
react prop-types组件传值
通过上下文传递参数import PropTypes from 'prop-types'const Domes2 = (props) => { return ( <Domes3></Domes3> )}const Domes3 = (props,context) => { return ( <div>{context.color}</div> )}export default class Domes1 extends Re原创 2021-02-07 14:29:59 · 167 阅读 · 0 评论 -
react Fragment根节点标签
import React,{Fragment} from 'react'render(){ return( <Fragment> <li>xx</li> <li>xx</li> </Fragment> )}原创 2021-02-04 17:20:40 · 255 阅读 · 0 评论 -
react使用shouldComponentUpdate或者React.PureComponent判断子组件是否需要实时渲染
//使用PureComponent 如果数据简单export default class XXX extends React.PureComponent{ 组件根据数据变化来看是否实时渲染}//使用shouldComponentUpdate生命周期函数nextProps.num === this.props.num判断是否一致export default class XXX extends React.Component{ shouldComponentUpdate(nextProps,nex原创 2021-02-04 15:03:40 · 141 阅读 · 0 评论 -
react 学习笔记 reduex仓库
安装redux和reace-reduxindex.jsimport { createStore } from 'redux'import { Provider } from 'react-redux'import reducer from './reducers/counter'//创建仓库const store = createStore(reducer);ReactDOM.render( <Provider store={store}><APP /></Pr原创 2021-02-04 14:50:23 · 378 阅读 · 0 评论 -
react 学习笔记一
1,npm run eject:拉去react的配置文件2,如果无法运行,删除git隐藏文件;3,安装npm install babel-plugin-import --save -D4,修改package.jason的babel,添加"plugins":[ [ "import", { "libraryName":"anted", "libraryDirectory":"es", "style":"css" } ]]...原创 2021-01-07 17:54:25 · 108 阅读 · 0 评论