React使用过程知识点随手记.txt

0.create-react-app新建项目
1.弹出配置
2.添加路由模块
3.修改webpack配置，让引入模块支持src写法
4.如何修改react的默认访问端口3000
5.export和export default的区别
6.react中dangerouslySetInnerHTML使用
7.react-native-uuid使用
8.yarn打包及部署到生产环境.
9.history.push(跳转到其他页面)
10.react中解决this指向问题的四种方法
11.解决vscode单击新文件时覆盖旧文件问题
12. lodash工具库
13.Js自动登陆示例（普通javascript）
14.函数组件编写示例
15.React中实现下载的代码
16.axios使用
17.如何通过函数传递参数
18.antd中modal底部定义按钮
19.antd中modal点击遮照层禁用关闭
20.React路由传参常见的几种方式

本人主要使用后端Java语言，也对前端react有兴趣，作为一个新手，未能进行系统的前端学习，因此，此文只能将使用React过程的一些零散的步骤过程记录下来，以便查询，如有错误，请指正。

react入门学习官网：https://reactjs.org/docs/getting-started.html

0.create-react-app新建项目

如：create-react-app accdemotest
npm&yarn&reactjs环境及支持create-react-app命令，可参考npm&yarn&reactjs环境安装并搭建我的第一个helloword项目

1.弹出配置

新建了create-react-app项目后，默认的配置较少，通过yarn eject或npm run eject弹出配置，执行成功后将多出config和scripts两个文件夹。

npm run eject

2.添加路由模块

yarn add react-router-dom
官网文档地址：https://reactrouter.com/web/guides/quick-start

3.修改webpack配置，让引入模块支持src写法

引入组件时，如果想通过指定到项目里面的src目录下的写法，需要设置webpack.config.js的src参数，否则没有加的话，会报错。

##在webpack.config.js中加入
'src': path.resolve(__dirname,'../src'),

注：不加以上配置的话，编绎会报错，如下加上配置后编绎不再有问题。

4.如何修改react的默认访问端口3000

yarn start 启动后，默认的访问端口号是3000，如果希望改它，通过start.js中的配置属性来完成修改。如果找不到start.js，通过npm run eject先弹出配置，然后再操作,
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

5.export和export default的区别

##export与export default都可用于导出常量、函数、文件、模块等
##在一个文件或模块中，export、import可以有多个，export default仅有一个
##通过export方式导出，在导入时要加{ }，export default则不需要

##比如以下写法，没有export default：

import React, { Component } from 'react';
export class Welcome extends Component {render() {return <h1>hello, {this.props.name}</h1>;}
}

以上的写法，没有default,在引入时写成import Welcome from 'src/components/Welcome.js'会报错，只能写成：

import {Welcome} from 'src/components/Welcome.js'

##又比如以下写法，通过export default写的:

import React, { Component } from 'react';
class Welcome extends Component {render() {return <h1>hello, {this.props.name}</h1>;}
}
export default Welcome

以上的写法，通过export default暴露,在引入时写成import Welcome from 'src/components/Welcome.js'，编绎正常,并且，可以在引入时随便改名称，如下，将组件的名称改成了Welcometest这样的写法。

import { Component } from 'react';
import Welcometest from 'src/components/Welcome.js'
class App extends Component {render() {return (<div><Welcometest name="john" /></div>);}
}
export default App;

6.react中dangerouslySetInnerHTML使用

带有html标签的字符串内容，默认是会保留原有的标签样式，并不会正确展示，如果需要通过html标签渲染效果，可以使用dangerouslySetInnerHTML,示例代码如下：

import { Component } from 'react';
class App extends Component {render() {let htmlStr = "<span style='color:red'>span content test&gt;</span>";return (<div><div>{htmlStr}</div><div dangerouslySetInnerHTML={{__html:htmlStr}} /></div>);}
}
export default App;

效果如下加了dangerouslySetInnerHTML后的能进行相应的样式显示:

7.react-native-uuid使用

##安装install

npm install react-native-uuid 或 yarn add react-native-uuid

##Create a UUID

import uuid from 'react-native-uuid';
uuid.v4(); // ? '64b777b6-2746-410c-ae07-fe599bbef0f6'

8.yarn打包及部署到生产环境.

采集yarn build和nginx进行生产环境的前端代码部署，步骤如下：

##打包，打包完成后将在源码目录下多出build文件夹，即为打包后的部署文件夹

yarn build

##部署到nginx，放在某个目录，然后通过nginx代理出来，nginx配置示例如：,重启nginx后通过http://ip:8443/访问。

    server {listen       8443;server_name  localhost;location / {root /home/testuser/fe/build;proxy_connect_timeout 30;proxy_http_version 1.1;proxy_send_timeout 60;proxy_read_timeout 60;try_files $uri $uri/ /index.html = 404;}}

9.history.push(跳转到其他页面)

一种跳转到其他页面的写法，通过history.push过去，并且通过参数传过去，在另一个页面可以直接获取使用

##跳转页面通过
##传参数
this.props.history.push({pathname:'/detail',datas:{tmpAuthCode: 'xxxxxxxx', clientType: "dingTalkScanningCode"}});
##不传参数
this.props.history.push('/detail');##到跳转页面后,想接收参数时：
console.log(this.props.location.datas);

10.react中解决this指向问题的四种方法

##行间定义事件后面使用bind绑定this

 run(){alert("第一种方法！")}<button onClick={this.run.bind(this)}>第一种</button>

##构造函数内部声明this指向

 constructor(props) {super(props);this.state={//数据}this.run = this.run.bind(this);}run(){alert("the second method！")}<button onClick={this.run}>the second method</button>

##声明事件时将事件等于一个箭头函数

 run = ()=> {alert("第三种方法！")}<button onClick={this.run}>第三种</button>

##行间定义事件使用箭头函数

     run(){alert("第四种方法！")}<button onClick={()=>this.run()>第四种</button>

我喜欢用第三种

11.解决vscode单击新文件时覆盖旧文件问题

将workbench.editor.enablePreview设置为fasle

"workbench.editor.enablePreview": false,

12. lodash工具库

lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
官网地址：https://www.lodashjs.com/

示例：如字符串转数组，然后判断数据中有没有
.indexOf(.split(localStorage.roleIds, ‘,’), record.id+‘’ ) == -1

13.Js自动登陆示例（普通javascript）

<!DOCTYPE html>
<html>
<body><form action="http://116.11.11.114:8180/Home/Login" id="frm" method="post" style="display: none;">First name:<br><input type="text" name="account" value="user"><br>Last name:<br><input type="text" name="pwd" value="123456"><br><br><input id="submit" type="submit" value="Submit"></form>
</body>
<script>document.getElementById("submit").click();
</script>
</html>

14.函数组件编写示例

实现了一个按钮权限的控制组件，通过传入一个唯一的按钮编码，通过后端程序控制此按钮的授权，前端通过接口查询当前用户是否具有此按钮的权限，来显示或不显示。

import React, { Fragment } from "react";
import api from "src/api";
import axios from 'axios';
import { message } from 'antd';
import { useEffect, useState } from 'react';
/**** 传入一个buttonUniqueCode参数，判断是否显示组件的childRen,主要用于权限按钮控制*/
export const AuthShow = props => {const [show, setShow] = useState(false);//获取按钮权限数据，并设置到show变量中const getButtonAuthData = () => {api.sysButton.checkCurrentUserButtonAuthByCode({data: {buttonUniqueCode: props.buttonUniqueCode,},}).then(res => res.data).then(json => {if (json.success) {setShow(json.data);} else {message.error(json.message);}}).catch(err => console.error(err));};useEffect(() => {getButtonAuthData();},[]);return show != true ? (<Fragment></Fragment>): (<Fragment>{props.children}</Fragment>)
};

其中的useEffect(() => { getButtonAuthData(); },[]); 加上[]的作用是让组件只加载一次，这个位置的参数数组是函数执行的依赖，空数组只会在渲染的时候执行一次，如果没有加依赖，每次组件重新渲染都会执行

##在需要进行按钮控制的地方进行引用控制，比如：

<AuthShow buttonUniqueCode='useManageInsert'><Button onClick={() => showModal('mail')}><Icon type="folder-add" />新增用户</Button>
</AuthShow>

15.React中实现下载的代码

在react中可以有三种实现下载的方式，仿a标签的Get方式，仿form表单的post方式，以及axios的post异步下载blob的方式，如下：

第1种下载方法，blob方式

downloadFile = () => {console.log("dowload file start..");//==================第1种下载方法，blob方式,要后台全返回数据才能在浏览器中下载，会让用户感觉没有响应==============let params = {};let url = "/test/fileDownload/downloadTest";axios.post(url, params, {headers: {}}).then(function (response) {const blob = new Blob([response.data]);const disposition = response.headers['content-disposition'];console.log(disposition);let fileName = disposition.split('filename=')[1];const linkNode = document.createElement('a');linkNode.download = fileName; //a标签的download属性规定下载文件的名称linkNode.style.display = 'none';linkNode.href = URL.createObjectURL(blob); //生成一个Blob URLdocument.body.appendChild(linkNode);linkNode.click();  //模拟在按钮上的一次鼠标单击URL.revokeObjectURL(linkNode.href); // 释放URL 对象document.body.removeChild(linkNode);}).catch(function (error) {console.log(error);});
}

第2种下载方法，仿a标签方式下载，适用于Get请求

downloadFile = () => {console.log("dowload file start..");//==================第2种下载方法，虚构造出a标签进行点击下载，适用于Get方式下载，很快能出现下载条。==============const url = "/test/fileDownload/downloadTest";const eleLink = document.createElement('a');eleLink.style.display = 'none';eleLink.href = url;document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);
}

第3种下载方法，虚构出form表单方式下载，适用于Post请求

downloadFile = () => {console.log("dowload file start..");//==================第3种下载方法，虚构造出form表单，进行仿form提交方式下载，适用于Post方式下载，很快能出现下载条。==============let form = document.createElement('form');form.style.display = 'none';form.action = "/test/fileDownload/downloadTest";form.method = 'POST';document.body.appendChild(form);let params = {};for (var key in params) {var input = document.createElement('input');input.type = 'hidden';input.name = key;input.value = params[key];form.appendChild(input);}form.submit();form.remove();
}

16.axios使用

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

#1.安装axios
yarn add axios
或指定版本安装如：
yarn add axios@^0.18.0#2.引入axios
import axios from 'axios';#3.使用axios如：
axios.get('/commonFile/batchGetCommonFiles?subjectId=1&subjectType=1')
.then(res => {this.setState({hasSavedFileList: res.data.data});
})
.catch(err => console.error(err));

其他react使用过程知识点会不断整理记录并持续更新.....

17.如何通过函数传递参数

比如在button中的onclick中要调用一个函数并传递参数，使用()=>开头的写法进行调用

##比如
<Button onClick={()=>{this.handleCreate(0)}} style={{ marginRight: 5 }}>保存草稿</Button>##函数定义如：
handleCreate = (publishStatus) => {console.log(publishStatus);
}

18.antd中modal底部定义按钮

示例

< Modal title="创建知识"visible={visible}//onOk={()=>{this.onCreate(1)}}onCancel={this.onCancel}// footer={false}destroyOnClose={true}width={1000}bodyStyle={{ height: 600 }}className="knowledge-model"maskClosable={false}footer={[<Button onClick={this.onCancel}>取消</Button>,<Button onClick={()=>{this.onCreate(0)}}>保存草稿</Button>,<Button type="primary" onClick={()=>{this.onCreate(1)}}>发布知识</Button>,]}
>

19.antd中modal点击遮照层禁用关闭

默认是开启的，会常常让用户不小心点到，这样填写的东西就没有了，建议是关闭的

<ModalmaskClosable={false}
>

20.React路由传参常见的几种方式

params

路由：
<Route path='/Inbox/:id' component={Inbox} />声明式导航：
<NavLink to={'/Inbox/01008'} >铅笔</NavLink>
编程式导航：
this.props.history.push( '/Inbox/'+'01008' )取值：this.props.match.params.id
优势 ： 刷新，参数依然存在
缺点 ： 只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

query

声明式导航：
<Link to={{pathname:'/Inbox',query:{id:'01009'}}} >铅笔</Link>
编程式导航：
this.props.history.push( {pathname:'/Inbox',query:{id:'01009'}} )
取值：this.props.location.query.id优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失（不管是hash方式，还是Browser模式都会丢失参数）

state

声明式导航
<Link to={{pathname:'/Inbox',state:{id:'01009'}}} >铅笔</Link>
编程式导航
this.props.history.push({pathname:'/Inbox',state:{id:"01"}});取值：this.props.location.state.id优势：传参优雅，传递参数可传对象
缺点：刷新地址栏，（hash方式会丢失参数，Browser模式不会丢失参数）

search

声明式导航
<Link to='/Inbox?a=1&b=2' >铅笔</Link>
编程式导航
this.props.history.push({pathname:'/Inbox',search:'?a=1&b=2'})取值：this.props.location.search
用location.search所获取的是查询字符串，需要进一步的解析

React使用过程知识点随手记相关推荐

React Native面试知识点
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-i ...
unity3D 知识点随手记
最近闲来无事,记记unity3D相关的一些知识点吧,也当作笔记存储.转载请标明出处:http://www.cnblogs.com/zblade/ 1.unity是如何调用Start/Awake等相关函 ...
react 用html插件,React配置过程中用到的插件汇总
●react插件 ●react-dom插件 ●react-router插件 ●react-redux插件 ●babel插件 ●webpack插件 ●loader插件 ●jquery插件 ●moment ...
网络分层架构 ARP baidu.com 访问过程知识点总结
因为本身学院的课非常"国际化",基本上将软工和CS常见的一些课,例如编译原理.汇编语言.计算机网络等都用 CMU 的 ICS 和 MIT 的 CSE 代替了,因此前面那些课我都没学 ...
miniUI零碎知识点随手记
miniUI中align小解: 1.align指的是性别分类下面的"男","女"的位置在中间:headeralign指的是"性别"文字在单元 ...
给自己看的unity知识点随手记(记录)
文章目录 Transform Math&Mathf Vector 从数组中随机抽取一个数 gameObject.activeInHierarchy gameObject.activeSelf ...
手把手教你React（一）JSX与虚拟DOM
初衷学习React有一段时间了, 一直想找个时间写一个React的系列文章.忙里抽闲,完成了第一篇.写这系列文章的初衷是总结这段时间的技术学习,以及给那些想学习React的同学们一点帮助.我会尽量以 ...
深入理解React（一）JSX与虚拟DOM
初衷使用 React 有一段时间了, 一直想找个时间写一个 React 的系列文章.忙里抽闲,完成了第一篇.写这系列文章的初衷是总结这段时间的技术学习,以及给那些想学习 React 的同学们一点帮助 ...
《React 学习之道》The Road to learn React (简体中文版)
通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程. 前言 <React 学习之道>这本书使用路线图中的精华部分用于传授 React,并将其融入一个独具吸引力的真实世 ...

React使用过程知识点随手记