react的学习笔记

最新推荐文章于 2020-12-28 10:19:04 发布

明长歌

最新推荐文章于 2020-12-28 10:19:04 发布

阅读量165

点赞数

文章标签： react

本文链接：https://blog.csdn.net/u012761510/article/details/90237165

版权

React的安装与项目创建

全局安装react-app（不需要重复安装）： npm install -g create-react-app
全局安装yarn（不需要重复安装）： npm install -g yarn
yarn安装react-router： yarn add react-router
创建react项目： create-react-app manager
运行项目：npm start
安装项目依赖：yarn add react-router-dom axios less-loader

react项目文件配置（按需加载，不一定全部加载）

暴露项目 webpack.config文件配置（不必需）：yarn eject
- 在此处遇到问题：This git repository has untracked files or uncommitted changes…Remove untracked files, stash or commit any changes, and try again
- git配置问题解决方案：
  1. git add .
  2. git commit -m “init”
  3. yarn eject
- 此处yarn run可能回报缺少某些插件，安装即可
  1. yarn add @babel/plugin-transform-react-jsx-source
  2. yarn add @babel/plugin-transform-react-jsx-self

修改config配置文件，由于有sass的配置，此时我们使用sass的配置修改后使用

//定义常量
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//将下面代码加入module中
{
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
              {
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
              'less-loader'
          ), 
          sideEffects: true,
        }，
        {
          test: lessModuleRegex,
          use: getStyleLoaders(
              {
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
          ),
        },

运行报错，缺少less，安装less：yarn add less
安装antd：yarn add antd
安装插件，按需加载antd：yarn add babel-plugin-import

安装完插件后，我们先不在暴露的config.js中修改文件，而是修改package.json文件

//代码如下：
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true //重要，如果需要改变主题颜色，需要的是true而不是“css”
        }
      ]
    ]
  }
}

配置antd的主题颜色，在webpack.config文件中找到如下代码：

if (preProcessor) {
      // loaders.push({
      //   loader: require.resolve(preProcessor),
      //   options: {
      //     sourceMap: isEnvProduction && shouldUseSourceMap,
      //   },
      // });
      let loader = require.resolve(preProcessor);
      if (preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: { //自定义主题
              'primary-color':' #f9c700',
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }
    return loaders;
  };

React的生命周期

getDefaultProps
getInitalState
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate

慕课网后台系统

less文件引入css文件

//@import 引入css样式文件，必须以;结尾
@import './../../style/default';
.footer{
  height: 100px;
  padding: 40px;
  text-align: center;
  color: @colorJ;
}

React路由实现

//一个简单的路由实现，首先建立三个页面分别是Main、About、Topics
import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Main from './Main';
import About from './About';
import Topics from './Topics';
export default class Home extends React.Component{
    render(){
        return (
        //<HashRouter></HashRouter>必不可少
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/topics">Topics</Link>
                        </li>
                    </ul>
                    <hr/>
                     <Route exact={true} path="/" component={Main} />
                    <Route path="/about" component={About} />
                    <Route path="/topics" component={Topics} />
                </div>
            </HashRouter>
        );
    };
}

React嵌套路由实现

//React嵌套路由实现，首先建立三个页面分别是Home、Router、Main、About、Topics
//Home页面
import React from 'react';
import {Link} from "react-router-dom";
export default class Home extends React.Component{
    render(){
        return (
                <div>
                    <ul>
                        <li>
                            <Link to="/main">Home1</Link>
                        </li>
                        <li>
                            <Link to="/about">About1</Link>
                        </li>
                        <li>
                            <Link to="/topics">Topics1</Link>
                        </li>
                    </ul>
                    <hr/>
                    {this.props.children}
                </div>
        );
    };
}
//Router页面
import React from 'react';
import {HashRouter as Router,Route} from 'react-router-dom';
import Home from './Home';
import Main from './Main';
import About from './About';
import Topics from './Topics';
export default class IRouter extends React.Component{
    render(){
        return (
            <Router>
                <Home>
                    <Route path="/main" render={()=>
                        <Main>
                            <Route path="/main/a" component={About} />
                        </Main>
                    }/>
                    <Route path="/about" component={About} />
                    <Route path="/topics" component={Topics} />
                </Home>
            </Router>
        );
    };
}

Each child in an array or iterator should have a unique “key” prop，报错原因是：在React 中 map
如果不给render的div 加上一个唯一的key就会warning。解决方法,增加key

import React from 'react';
import {Card, Row, Col,Modal} from 'antd';
import './ui.less';
export default class Gallery extends React.Component{
    state={
        visible:false
    };
    openGallery=(imgSrc)=>{
        this.setState({
            visible:true,
            currentImg:`/gallery/${imgSrc}`
        });
    };
    render(){
        const imgs=[
            ['1.png','2.png','3.png','4.png','5.png'],
            ['6.png','7.png','8.png','9.png','10.png'],
            ['11.png','12.png','13.png','14.png','15.png'],
            ['16.png','17.png','18png','19.png','20.png'],
            ['21.png','22.png','23.png','24.png','25.png']
        ];
        const imgList=imgs.map((list,key)=>list.map((item,iKey)=>
            <Card
                key={iKey}
                style={{marginBottom:10}}
                cover={<img src={`/gallery/${item}`} key={key}/>}
                onClick={()=>this.openGallery(item)}
            >
                <Card.Meta title="React" description="React123"/>
            </Card>
        ));
        return (
            <div className="card-wrap">
                <Row gutter={10}>
                    <Col md={5}>
                        {imgList[0]}
                    </Col>
                    <Col md={5}>
                        {imgList[1]}
                    </Col>
                    <Col md={5}>
                        {imgList[2]}
                    </Col>
                    <Col md={5}>
                        {imgList[3]}
                    </Col>
                    <Col md={4}>
                        {imgList[4]}
                    </Col>
                </Row>
                <Modal
                    title="图片画廊"
                    visible={this.state.visible}
                    onCancel={()=>{
                        this.setState({
                            visible:false
                        })
                    }}
                    footer={null}
                >
                    {<img src={this.state.currentImg} alt="" style={{width:'100%'}}/>}
                </Modal>
            </div>
        );
    };
}

yarn add moment --save moment对象，antd日期插件时安装
在react项目引入第三方库（在public/index.html文件里面引入js库），如百度地图，在其他页面new BMap时，会报undefined的原因是：因为react为单页面应用程序，模块化开发，每一个页面是一个模块，必需要import导入才是一个模块，是一个合法的对象，才能识别。如果不是import导入进来的对象是非法变量，这是需要将对象挂载在window 上，window 是全局变量，模块不会检测window是不是一个对象。但在多页面应用中，该对象就是一个全局变量，所以不会报错。
yarn add echarts echarts-for-react --save 安装echarts插件
yarn add react-draft-wysiwyg draftjs-to-html --save 安装draft插件
yarn add redux react-redux redux-devtools-extension --save 安装redux插件