reactjs使用记录

非DOM属性介绍
dangerouslySetInnerHTML ,在JXS直接插入HTML代码
ref ,父组件引用子组件
key ,提高渲染性能,给每个节点添加一个唯一标识
react中diff算法,两个组件之间比较

开始 ==> 比较节点 不同 相同 ==>比较属性,比较子节点
||
结束
JSX解释器架构

组件生命周期

组件本质上是状态机,输入确定,输出一定确定
react有两个特点:
1.去除所有手动dom操作,
2.组件状态跟结果一一对应,理解程序在不同状态会有怎么样的输出,组件中有status和propotype属性,属性是由父组件传递给子组件的,状态与状态之间发生转换时会触发钩子函数,从而且让我们有机会做出响应,可以自己编写钩子函数.

初始化: render
运行中: 状态发生改变,触发钩子函数
销毁: 父组件在某个状态下删除子组件,子组件就被销毁

:

钩子函数	函数名	特性
初始化	getDefaultProps	获取第一个实例初始化时,默认属性
	getInitialSate	获取实例默认状态
	componentWillMount	组件即将被装载
	render	组件在这个函数中生成dom节点
	componentDidMount	组件装载之后
运行中
	componentWillReceiveProps	属性传送组件之前,可以修改属性
	shouldComponentUpdate	属性是否要更新,当shouldComponentUpdate方法返回false时，就不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用
	componentWillUpdate	当props和state发生变化时执行，并且在render方法之前执行,当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了
	render	render的时候会调用render()会被调用
	componentDidUpdate	组件更新结束之后执行，在初始化render时不执行
销毁
	componentWillUnmount	清理操作

Q:组件之间传递数据?
A:子组件->父组件传递 : 子组件调用父组件的属性进行传递,
父组件->子组件传递 : 子组件可以直接使用父组件的属性

Q:组件何时会re-render?
A: this.setState 组件获取更新状态之后,

加入redux之后,启动加载顺序

1. 加载定义好的各个action
2. 加载createStore
3. store需要加载reducer->combineReducers
4. 加载container->mapStateToProps->mapDispatchToProps

const store = configureStore();
render(
   <Provider store={store}>
      <Root />
   </Provider>,
   document.getElementById('main')
);

Provider: 把store放在context里,本质上 Provider 就是给connect提供store用的

使用和学习react时,把npm 命令弄懂,才算是真正入门,(PS:今天还为了导入新项目弄了大半天的node_modules)

./src/style/public.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/style/public.scss)
Run `npm install node-sass` or `yarn add node-sass` inside your workspace..

$npm install --save node-sass

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node"

参照
https://blog.csdn.net/cxionc123/article/details/103233393

下载win32-x64-72_binding.node 在cmd 输入
$ set SASS_BINARY_PATH=f:\win32-x64-72_binding.node
$ npm uninstall node-sass && npm install node-sass

为什么用到cmd,因为我的执行npm install 提示没有写入文件权限,所有用cmd管理员权限执行npm install

https://webpack.js.org/configuration/watch/
延迟加载

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600
  }
};