相关知识点:
ES6:
node.js:
官网下载安装
检查安装成功的命令: node -v(node 版本查询) npm -v(npm 版本查询)
cnpm: 淘宝镜像
webpack:
待补充:
window 命令:
cd 定位到目录, 用法: cd + 路径
dir 列出文件列表
cls 清空命令提示符窗口内容
cd.. 定位至上层目录
待补充
React:
React 基础知识
React 组件基础
一: 初步配置 React 开发环境
npm 项目初始化: npm init(创建一个初始化的 package.json) 项目依赖包安装: reactreact-dombabelifybabel-preset-reactbabel-preset-es2015 (babel-corebabel-loaderwebpackwebpack-dev-server) eg:npm react save 保存到生产依赖环境
npm react save dev 保存到开发依赖环境
webpack 热加载配置
全局安装 webpack webpack-dev-server 项目内安装 webpack webpack-dev-server 实现打包 webpack watch 监控
项目热加载
浏览器: localhost:8080/webpack-dev-server/index.html
二: 虚拟 DOM 概念
如何理解虚拟 DOM?
组件
组件的 return 函数里返回的 HTML 节点必须是一个 可以给外部使用的组件定义: export default class ComponentHeader extends React.Component{}
入口的定义: ReactDOM.render(,document.getElementById());
三: React 多组件嵌套
组件也可以通过参数的形式传递 组件的 return 函数里返回的 HTML 节点必须是一个 注意项目命名的规范与文件的结构化 补充: 代码中的./ 表示当前目录下;.gitignore 文件名写错以至于将相关包上传, 以后注意!
四: JSX 内置表达式
{window.username == ? 默认用户名 : 用户名: + username} input 中 disable={} 单引号去掉 {/ 注释 /} HTML 要显示可以进行 Unicode 转码 eg: HTML 要显示还可以通过 注意此方法可能会存在 XSS 攻击 补充:.gitignore 内容写错 node_module, 应该是 node_modules 注意注意! 加 s
五: 生命周期
生命周期中的函数类似于钩子: 钩子实际上是一个处理消息的程序段, 通过系统调用, 把它挂入系统每当特定的消息发出, 在没有到达目的窗口前, 钩子程序就先捕获该消息, 亦即钩子函数先得到控制权这时钩子函数即可以加工处理 (改变) 该消息, 也可以不作处理而继续传递该消息, 还可以强制结束消息的传递
component instantiated (组件初始化) getDefaultProps (获取默认属性) getInitialState (获取初始化 state) componenntWillMount (组件将要加载的函数)componentDidMount (组件加载完毕的函数) propschanged (属性的更改) componentWillUpdate (将要 update) componentDidUpdate (update 完成) componentdeleted (组件删除) componentWillUnmount (组件卸载的函数) 补充: 出现的问题引入的包 reactreact-dom 注意小写, 创建组件 extends React.Component 写对,
未解决问题: React Developer Tools 会自动检测 React 组件, 不过在 webpack-dev-server 模式下, webpack 会自动将 React 组件放入到 iframe 下, 导致 React 组件检测失败, 变通方法是 webpack-dev-server 配置在 inline 模式下即可, 但是未成功, 解决方法: 在 webpack-dev-server 配置中没有 inline:true 去开启 inline 模式, 因为 webpack-dev-server 模块无法访问 webpack 的配置因此, 用户必须添加 webpack-dev-server 的客户端入口文件到 webpack 的配置中, webpack-dev-server 简单使用
React 属性与事件
一: State 属性
state 对于模块属于 自身 属性 初始化: this.state = {username:Parry}; 初始化可以放置在构造函数 constructor 里 修改 state:this.setState({username:liuxilei}); state 的作用域只属于当前的类, 不污染其他模块 补充: 状态值会立即 (自动) 反映在虚拟 dom 上然后显示在 dom 上; ReactDOM.render(,document.getElementById()); 这里没有引号, state 改变可以实时反应在页面上, 不刷新
二: Props 属性
props 对于模块属于 外来 属性 传递参数: 模块中接收参数: this.props.username
三: 事件与数据的双向绑定
事件的绑定: 注意 es6 的语法
可以在构造函数里绑定 this:this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
. 或者调用时绑定: onClick = {this.changeUserInfo.bind(this,50)}
子页面向父页面传递参数的方法
在子页面中通过调用父页面传递过来的事件 props 进行组件间的参数传递 好好理解这里的 onChange 事件, 为什么不用 onBlur
补充: this 的指向: 类的方法内部如果含有 this, 它将默认指向类的实例
来源: https://www.2cto.com/kf/201802/721918.html