react打怪之路

89 阅读1分钟

项目目录结构

react-/

|
|──dist/                                    * 发布版本构建输出路径
|
|──dev/                                     * 调试版本构建输出路径
|
|──src/                                     * 工具函数
|     |
|     |—— component/                        * 各页面公用组件
|     |
|     |—— page/                             * 页面代码
|     |      |—— index/                     * 页面代码
|     |      |        |—— Main/             * 组件代码
|     |      |        |       |—— Main.jsx  * 组件jsx
|     |      |        |       |—— Main.scss * 组件css
|     |      |
|     |      |—— detail/                    * 页面代码
|     |
|     |—— static/                           * 静态文件js,css
|
|
|──webpack.config.build.js                  * 发布版本使用的webpack配置文件
|──webpack.config.dev.js                    * 调试版本使用的webpack配置文件
|──.eslint                                  * eslint配置文件
|__.babelrc                                 * babel配置文件

React之Props,及与state的区别

  • props是指组件间传递的一种方式,props自然也可以传递state。由于React的数据流是自上而下的,所以是从父组件向子组件进行传递;另外组件内部的this.props属性是只读的不可修改!
  • state是组件内部的状态(数据),不能够直接修改,必须要通过setState来改变值的状态,从而达到更新组件内部数据的作用。

props和state是经常要结合使用的,父组件的state可以转化为props来为子组件进行传值。在这种情况下,子组件接收的props是只读的,想要改变值,只能通过父组件的state对其进行更改。