React基础与总结(持续更新)

本是古典何须时尚 2022-11-28 00:47 205阅读 0赞

1.1 安装

npm install --global create-react-app
    create-react-app first_react_app
    cd first_react_app
    npm start
    git clone git@github.com:ruanyf/react-demos.git

### 1.2 常用语法 ###

2.3 整合antd

yarn add antd
    yarn add react-app-rewired customize-cra babel-plugin-import
    yarn add less less-loader@5.0.0
    yarn add react-router-dom

### 2.4 redux ###

Redux专注于状态管理，和react解耦，单一状态，单向数据流
    
    reducer创建store，通过store.getState获取状态
    
    状态变更，store.dispatch(action)来修改状态
    
    reducer函数接受state和action，返回新的state，可以使用store。subscribe监听每次修改
    
    import {createStore} from 'redux'
    function counter(state=0, action){
        switch(action.type){
            case '加机关枪':
                return state + 1
            case '减机关枪':
                return state - 1
            default:
                return 10
        }
    }
    const store = createStore(counter)
    const init = store.getState()
    function listener() {
        const current = store.getState()
    }
    store.subscribe(listener)
    store.dispatch({type:"加机关枪"})

### 2.5 redux整合react ###

react-redux优雅的链接react和redux
    npm install redux-devtools-extension 并且开启
    npm install redux-thunk --save
    redux处理异步，需要redux-thunk插件 
    使用applyMiddleware开启thunk中间件
    action可以返回函数，使用dispatch提交action

### 2.6 react 跨越请求代理 ###

#package.json: 最后一行添加
    "proxy": "http://localhost:4000"

### 2.7 当你在 this.props 中找不到 history 时 ###

import { withRouter } from 'react-router-dom'
    @withRouter
    class ...
    https://www.jianshu.com/p/704b773b54fb

### 2.8 react-antd一些小问题 ###

<Menu
            onClick={this.handleClick}
            style={
       { width: 256 }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
          >
    defaultSelectedKeys(只能匹配一次) ==> selectedKeys(可以多次匹配以最后一次为主)

### 2.9 ref ###

import React, { Component } from 'react';
    import { withRouter } from 'react-router-dom';
    import { Input, Button } from 'antd';
    
    @withRouter
    class Demo extends Component {
      ageRef = React.createRef()
       
    
     constructor(props, context){
       super(props,context);
       this.state = {
        query:{}
       }
     }
    
     componentDidMount(prePros, preState){
      console.log('mount',prePros, preState);
     }
    
     componentDidUpdate(prePros, preState){
       console.log('update',prePros, preState);
     }
    
     listPage=() => {
      console.log('listPage', this.state.query)
      var age = this.refs.age.state.value
      console.log('age', age)
      console.log('keyword', this.refs.keyword.state.value)
      console.log('password:' + this.ageRef.current.value)
        this.ageRef.current.value='123hello'
     }
    
     handleChange=(e)=>{
       this.state.query.username = e.target.value;
       this.setState({query:  this.state.query}, () => {
        console.log('this.state',this.state)
       });
     }
     
     render(){
      return (<div>
         <Input placeholder="请输入用户名" onChange={this.handleChange}/>
         <Input defaultValue="12" ref="age" placeholder="请输入年龄"/>
         <Input ref="keyword" placeholder="请输入搜索关键词"></Input>
         <input type="text" ref={this.ageRef}/>
         <Button onClick={this.listPage}>搜索</Button>
       </div>)
     }
    }
    export default Demo

### 2.14 多个FormItem放一行 ###

<FormItem
            {...formItemLayout}
            label={'主要股东'}
        >
            <Row gutter={30}>
                <Col span={8}>
                    {this.props.form.getFieldDecorator('shareholderName2', {
                        rules: [{ required: true, message: '请输入股东名称' }],
                    })(<Input placeholder={'请输入股东名称'} />)}
                </Col>
                <Col span={8}>
                    <FormItem>
                        {this.props.form.getFieldDecorator('shareholderRate2', {
                            rules: [{
                                required: true,
                                // tslint:disable-next-line:max-line-length
                                pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
                                message: '请输入正确的持股比例',
                            }],
                        })(<Input addonAfter={'%'} placeholder={'请保留一位小数'}/>)}
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
    参考博客：
    https://blog.csdn.net/weixin_33826268/article/details/88729328?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-88729328.nonecase&utm_term=form%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E5%9C%A8%E4%B8%80%E8%A1%8Cantd
    第二种方法：
    <Form layout="inline">
        <FormItem>
        <Input placeholder="请输入用户名"/>
        </FormItem>
        <FormItem>
        <Input placeholder="请输入密码" />
        </FormItem>
    </Form>
    第三种方式（来自官网）
     const count = expand ? 10 : 6;
        const children = [];
        for (let i = 0; i < count; i++) {
          children.push(
            <Col span={8} key={i}>
              <Form.Item
                name={`field-${i}`}
                label={`Field ${i}`}
                rules={[
                  {
                    required: true,
                    message: 'Input something!',
                  },
                ]}
              >
                <Input placeholder="placeholder" />
              </Form.Item>
            </Col>,
          );
        }

loading: 参考 [https://blog.csdn.net/Stephen\_\_Wu/article/details/80463232][https_blog.csdn.net_Stephen_Wu_article_details_80463232]

[https_blog.csdn.net_Stephen_Wu_article_details_80463232]: https://blog.csdn.net/Stephen__Wu/article/details/80463232