React 的一些配置
一、在 npm run build 的时候关闭 SourceMap 的方法
最不具破坏性且没有副作用的方案：
- 在根目录下新建 .env.production 文件；
- 然后在这个文件中只需写上一行代码：
GENERATE_SOURCEMAP=false
如果因为 React 脚手架版本不支持，则可以使用以下方案，但是需要注意该方案根据不同版本会有所差异，且不会消除 CSS和 JS 文件中的 mapsource 的引用注释，这会导致 Chrome 最新内核版本在控制台报出找不到 .map 文件的警告。具体配置过程如下：
-
找到目录“node_modules/react-scripts/config”里的“webpack.config.js”文件；
-
找到配置属性“getStyleLoaders >options>sourceMap”，将它的值由“true”改为“false”即可。
也可以直接搜索“sourceMap”（注意大小写），一开始会有比较多的结果（大概 28 项左右），打开“区分大小”加“全字匹配”的搜索限制后缩减到了 8 项，而这些结果中只有唯一一个是带有布尔值的，修改它就对了。
二、在开发过程中启用 sourceMap 的方法
-
通过 cnpm install @craco/craco --save 安装配置覆盖工具 CRACO
(Create React App Configuration Override) -
将 package.json 文件中启用开发模式的命令部分改成“craco start”，尽量保留原来的启动方式，防止以后构建的时候异常。
3.在根目录下创建两个 CRACO 的配置文件：
主文件名为“craco.config.js”，内容如下：
const sassSourcemapsPlugin = require("./craco-plugin-sass-sourcemaps");
module.exports = {
plugins: [
{ plugin: sassSourcemapsPlugin }
]
};
针对 sass 资源映射文件的配置文件名为“craco-plugin-sass-sourcemaps.js”，内容如下：
module.exports = {
overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
function traverse(obj, callback) {
if (Array.isArray(obj)) {
obj.forEach(item => traverse(item, callback));
} else if ((typeof obj === 'object') && (obj !== null)) {
Object.keys(obj).forEach(key=>{
if (obj.hasOwnProperty(key)) {
callback(obj, key);
traverse(obj[key], callback);
}
})
}
}
traverse(webpackConfig, (node, key) => {
if (key === "loader") {
if (
(node[key].indexOf("sass-loader") !== -1) ||
(node[key].indexOf("postcss-loader") !== -1) ||
(node[key].indexOf("css-loader") !== -1)
) {
if (node.options) {
node.options.sourceMap = true;
}
}
}
})
return webpackConfig;
}
};
- 通过命令 npm start 运行项目即可查看代码的映射。
三、修改 React 在打包后的文件引用路径
这个配置是为了解决代码上传到服务器端后文件找不到的问题。
在根目录下找到“package.json”文件，在配置项内加上配置 “homepage”:"." 后保存即可。
其它修改方式
-
找到目录“node_modules/react-scripts/config”里的“paths.js”文件；
-
搜索函数“getServedPath”，将函数内部的路径部分的“/”改为“./”保存即可
react的组件存放数据有两种方式。
（1）、存放外部数据的props，数据是只读，是不能修改的。
（2）、存放组件内部数据的state，存放组件自己的数据，其是放到constructor(){}里面。
2、关于constructor。
（1）constructor是先于render执行的
（2）constructor是什么时候调用？new的时候。new的时候做四件事：①新产生一个对象②让this指向新产生的对象③执行这个函数④会返回这个新创建的对象。
3、constructor里面的this
（1）在constructor里面直接输出this是不行的，会报错。
错误：this不被允许出现在super()之前。
state用法
（1）写法
constructor(props){
super(props);
this.state = { //存放组件本身的数据
n:1,
visible:true,
arr:[1,2,3]
}
}
（2）修改state里面的值
①直接修改this.state.visible，这个方式会导致 数据会变，但是视图不会同步变，尽量避免用这种方式。
class Group extends React.Component {
constructor(props){
super(props);
this.state = { //存放组件本身的数据
n:1,
visible:true,
arr:[1,2,3]
}
this.toggle = this.toggle.bind(this); //toggle 能访问到this
}
toggle(){
this.state.visible = !this.state.visible
console.log(this.state.visible)
})
}
render(){
return <div>{this.state.visible}</div>
}
}
解决方法：在toggle里面加一句this.forceUpdate()。但这种方式很不优雅，不推荐，最好永远不要用这种方式。