react-tutorial

react-tutorial copied to clipboard

Bumps [node-sass](https://github.com/sass/node-sass) from 4.13.1 to 7.0.0. Release notes Sourced from node-sass's releases. v7.0.0 Breaking changes Drop support for Node 15 (@​nschonni) Set rejectUnauthorized to true by default (@​scott-ut, #3149) Features...

dependabot[bot]

React脚手架生成配置文件

1

# 生成config目录 在 create-react-app 的 package.json 文件里面有一行命令 ```json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ``` 所以当我们执行`npm run eject`的时候，我们就可以在我们的项目中生成一个`config`的配置文件，里面可以更改 webpack 的参数 #...

Wscats

# React组件 React提供了两种方式来声明组件，一种是**函数式**，一种是**类式**，就是用ES6的class我们所有的组件都继承自`React.Component` 函数式很简单，就像我们平常写函数一个，接受一个参数作为输入，然后进行相应的输出，只不过它输出的`jsx`格式 ## 函数式组件 注意组件只能有一个根元素 ```javascript function Wscats(props) { return {props.name} } //ES6 const Wscats = ({props}) => ( {props.name} ) ``` ## 类式组件 ```javascript import React from...

Wscats

利用`Proxy`对数据进行劫持，自动触发`this.setState` ```js import { define, WeElement, html, h, extend, get, set } from "omi"; export interface appOptions { name: string; view(props?: any, state?: any, ref?: any); state?: any; propTypes?: any;...

Wscats

# 安装 我们推荐使用`Homebrew`来安装`Node`和`Watchman`。在命令行中执行下列命令安装： ```bash brew install node brew install watchman ``` 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！ ```bash npm config set registry https://registry.npm.taobao.org --global...

Wscats

# 高阶组件(HOC) `redux`的原理是利用了高阶组件，下面就是一个常见的高阶组件，高阶组件本质是利用了函数组件和类组件的特性实现的，函数组件可以得到外部props值，并传递给类组件，然后返回类组件，最后使用的这个函数组件就是高阶组件 ```js import React, { Component } from 'react' export default (props) => { return (WraooedComponent) => { return class HOC extends Component { state = { name:...

Wscats

# 安装 全局安装`dva-cli`脚手架，会应有一个新的`dva`命令，使用它来初始化一个新的`dva`项目，然后它会自动安装所需的依赖，然后进入该项目文件夹，然后执行`npm start`启动项目 ```bash npm install dva-cli -g dva -v dva new dva-quickstart cd dva-quickstart npm start ``` # 路由 在`routes`目录下新建`Products.jsx`组件 ```jsx import React from 'react'; // 是帮你连接组件和redux import...

Wscats

# VDOM VDOM，也叫虚拟 DOM，它是仅存于内存中的 DOM，因为还未展示到页面中，所以称为 VDOM ```js var vdom = document.createElement("div"); ``` 上面这一句就是最简单的虚拟 DOM ```js var vdom = document.createElement("div"); document.body.append(vdom); ``` 上面这两句就是把虚拟 DOM 转化为 真实 DOM，其实就是把节点 append 到页面中 # 常见DOM操作...

Wscats

## 项目结构 ```json --your project |--app |--components |--productBox.jsx |--main.js |--build |--index.html |--bundle.js(该文件是webpack打包后生成的) ``` ## 用npm安装react、webpack 默认已经安装了[Nodejs](https://nodejs.org/en/)，推荐用cnpm ``` npm install --save-dev react react-dom --save-dev npm install -g webpack --save-dev//建议webpack全局安装，方便我们后面使用webpack命令 ``` ...

Wscats

# 组件的生命周期  ## 组件在初始化时会触发5个钩子函数： |id|钩子函数|用处| |-|-|-| |1|getDefaultProps()|设置默认的props，也可以用defaultProps设置组件的默认属性| |2|getInitialState()|在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props| |3|componentWillMount()|组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state| |4|render()|react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了| |5|componentDidMount()|组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次| ## 在更新时也会触发5个钩子函数： |id|钩子函数|用处| |-|-|-| |6|componentWillReceivePorps(nextProps)|组件初始化时不调用，组件接受新的props时调用| |7|shouldComponentUpdate(nextProps, nextState)|react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤| |8|componentWillUpdate(nextProps, nextState)|组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state| |9|render()|同上| |10|componentDidUpdate()|组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。还有一个卸载钩子函数| |11|componentWillUnmount()|组件将要卸载时调用，一些事件监听和定时器需要在此时清除。 以上可以看出来react总共有10个周期函数（render重复一次），这个10个函数可以满足我们所有对组件操作的需求，利用的好可以提高开发效率和组件性能

Wscats