React 的一些配置

最新推荐文章于 2024-09-08 09:46:03 发布

茶理li

最新推荐文章于 2024-09-08 09:46:03 发布

阅读量1.0k

点赞数

文章标签： react

原文链接：https://note.youdao.com/ynoteshare1

版权

一、在 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>
	        	}
	        }