安装
npm i -g nrm
查看有哪些源
nrm ls
切换源
nrm use 源的地址
npm ls -g 查看全局安装的包
npm view 报名 versions
查看安装包的所有版本
官网 zhuanlan.zhihu.com/p/608604094
github.com/coreybutler…
命令
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm install <version> // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version> // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls // 显示所有安装的node.js版本
nvm list available // 显示可以安装的所有node.js的版本
nvm use <version> // 切换到使用指定的nodejs版本
nvm v // 显示nvm版本
nvm install stable // 安装最新稳定版
nvm i node版本
nrm
##全局安装
npm i -g nrm
## 查看有哪些源
nrm ls
## 切换源
nrm use 源的地址
npm ls -g 查看全局安装的包
npm view 报名 versions
查看安装包的所有版本
css3动画
// flex
// 动画 transform transition | animation key-frames
// grid
// position 粘性定位
// :root :after :before
/*
触发 transform ,必须触发事件
transform:
translate:translate(x,y) , translateX(x) ,translateY(y), translate3D(x,y,z)
scale(1)
rotate(90deg)
transition：css属性 执行几秒 动画效果 延迟几秒执行
*/
classnames 用法
先引入 import cs from 'classnames';
const onClick = () => {
setX(!x);
};
<div styleName={cs('div1', { div2: x })}></div>
<Button onClick={onClick}>点击</Button>
class类组件方法与生命周期
// export default class bbbbbb extends Component {
// constructor(props) {
// super(props);
// this.state = {
// user: '小马',
// age: 25,
// };
// }
// componentDidMount() {
// console.log('componentDidMount');
// }
// shouldComponentUpdate() {
// console.log('shouldComponentUpdate');
// return true;
// }
// componentDidUpdate() {
// console.log('componentDidUpdate');
// }
// onClick = () => {
// // this.setState({
// // user: '小黑',
// // });
// console.log(this.xxx, 'this.xxx');
// };
// onClick2 = () => {
// this.setState({
// age: this.state.age + 1,
// });
// };
// render() {
// const { user, age } = this.state;
// console.log('render');
// return (
// <div>
// <h1 onClick={this.onClick}>user: {user}</h1>
// <h1 onClick={this.onClick2}>age: {age}</h1>
// <Child age={age} ref={(v) => (this.xxx = v)} />
// </div>
// );
// }
// }
父
/*
react
1. class 类组件
2. 函数组件 函数名大写
3. use 自定义 hook
* state
* 方法 事件
* 传值
* 生命周期
16.4之前
三个阶段
加载阶段
constructor
render
componentDidMount
更新阶段
shouldComponentUpdate(nextProps, nextState)
return false 组件不渲染
return true 组件才会渲染
render
componentDidUpdate
卸载阶段
componentWillUnmount
16.4之后
*
constructor(props) {
console.log('constructor');
// 构造函数
// 子类没有自己的 this,
super(props);
this.state = {
user: '小花',
age: 25,
};
}
componentDidMount() {
console.log('componentDidMount');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true;
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
onClick = () => {
this.setState({
user: '小白',
});
};
onClick2 = () => {
this.setState({
age: this.state.age + 1,
});
};
*/
子
// import React, { Component } from 'react';
// import './styles.less';
// export default class Child extends Component {
// shouldComponentUpdate(nextProps, nextState) {
// if (nextProps.age === this.props.age) {
// console.log('no');
// return false;
// } else {
// return true;
// }
// }
// onClick = () => {
// console.log(1111);
// };
// render() {
// const { age } = this.props;
// console.log('我是子组件, 我渲染了');
// return (
// <div>
// <h1>age: {age}</h1>
// </div>
// );
// }
// }
import React, { Component } from 'react';
import './styles.less';
export default class Child extends Component {
state = {
sex: '男',
age1: 0,
};
// static getDerivedStateFromProps(nextProps, state) {
// // 作用: 修改 state
// // 没有 this
// // 必须有 return
// // 必须 初始化 state
// console.log(nextProps, 'nextProps');
// console.log(state, 'state');
// return {
// age1: nextProps.age,
// };
// return null;
// }
static getDerivedStateFromProps(nextProps, state) {
console.log(nextProps, 'nextProps');
console.log(state, 'state');
return {
age1: nextProps.age,
};
return null;
}
shouldComponentUpdate(nextProps, nextState) {
// this.props 取上一次的 props
if (nextProps.age === this.props.age) {
return false;
}
return true;
}
// onClick = () => {
// console.log(1111);
// };
render() {
const { age } = this.props;
return (
<div>
<h1>age: {age}</h1>
<h1>age1: {this.state.age1}</h1>
</div>
);
}
}
redux
redux
1. redux 哪些常用的方法 createStore, applyMiddleware, combineReducers
2. redux 中间件 看面试题
redux-promise 怎么用的 (为什么用)?
因为 redux的 action 的 默认是纯函数, 如果想写异步可以用 redux-promise
3. store 有哪些方法
dispatch
getState: 获取所有的 state
subscribe: 订阅
4. redux 原理
跨域
* 为什么会有跨域: 因为浏览器的同源策略(CORS) 即协议, 域名, 端口 只要有一个不同 就会产生跨域
* 怎么解决跨域:
jsonp
<script src="后台接口地址"></script>
后台返回一个函数调用方法 例如 abc(数据)
前端在js里设置一个 abc 方法, 后台调用 前端的abc方法传递数据
node代理
node 请求后台接口(node请求后台接口不走浏览器所以不会跨域), 前端请求node的接口
node怎么做跨域的: node 在本地封装多个接口, 前端请求本地的node接口, node再去请求后台接口 返回数据
后台设置请求头
response.setHeader("Access-Control-Allow-Origin", "*")
普通函数与箭头函数区别
this普通函数 this: this 代表当前正在执行的对象
对象.函数( this === 对象 )
箭头函数: 箭头函数 没有自己的 this, 箭头函数的 this 是在他 "定义的时候" 就 "固定不变了", 会去寻找上一级作用域的 this 当成自己的 this
