目录

一.react使用mock数据

二. 组件划分原则

三.什么是state,如何设计state

四.onchange事件中的e.target为null 调用之前加 e.persist()就ok

一.配置代理proxy

1.react配置代理到mock放服务器

在原来的create-react-app 脚手架中，是通过 package.json 配置文件来配置代理的。但是，在新版的脚手架中，通过 package.json 只能配置一个代理并且只能说字符串When specified, "proxy" in package.json must be a string.。

-1.其中之一解决方案：在package.json中查看你的react-scripts的版本号 版本太高可能不支持 把node_modules/react-scripts删除了 重新安装 npm i react-scripts@1.1.1 --save

-2.如果需要配置多个代理的话，
新版的代理配置，是通过/src/setupProxy.js这个文件来配置的。比如，我们想要代理 cnodejs.org 这个网站的接口，我们可以通过创建这个文件，然后在期中录入以下内容来实现：

image.png

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        proxy(
            '/api/v1', {
                target: 'https://cnodejs.org',
                changeOrigin: true
            }
        )
    )
      app.use(
        proxy(
            'xxx', {
                target: 'xxx',
                changeOrigin: true
            }
        )
    )
}

创建好这个文件之后，会自动的引用它，不需要额外的配置。不过代理想要生效，必须重新运行项目。

我们重启项目之后，可以在简单的测试一下：http://localhost:3000/api/v1/topics
配置参数和在 package.json 中是一样的，只是换了个形式而已。

2.直接将mock数据放到项目public文件夹

在public目录下建立mock文件夹 里面比如设置data.json

image.png

直接访问http://localhost:3000/mock/data.json就可以了
因为在public目录下的内容是不会被构建的，会原封不动的打包到整个项目当中 作为静态资源存在的

二. 组件划分原则

1.解耦：降低单一模块 / 组件的复杂度

2.复用：保证组件一致性，提升开发效率

3.组件颗粒度需要避免过大或过小

三.什么是state,如何设计state

1.代表UI的完整且最小状态集合

2.如何判断是不是state

1.是否通过父组件props传入？ 不是变化的状态
2.是否不会随时间，交互操作变化？不是变化的状态
3.是否可以通过其他state或者props计算得到？ 冗余的状态 没必要归到state
这些都不是state

3.state的双层含义

1.代表应用UI的所有状态的集合
2.状态集合中的每一部分（）

3.state的保存位置

1.确定依赖state的每一个组件
2.如果某个state 被多个组件依赖，寻找共同的父组件(状态上移)