关于React的学习笔记

相关知识点：

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) 项目依赖包安装: react、react-dom、babelify、babel-preset-react、babel-preset-es2015 (babel-core、babel-loader、webpack、webpack-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内置表达式

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 (组件卸载的函数) 补充:出现的问题引入的包 ‘react’、’react-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 = ; 初始化可以放置在构造函数constructor里 修改state:this.setState(); state的作用域只属于当前的类，不污染其他模块 补充：状态值会立即(自动)反映在虚拟dom上然后显示在dom上;ReactDOM.render(,document.getElementById(”));这里没有引号，state改变可以实时反应在页面上，不刷新

二：Props属性

三：事件与数据的双向绑定

事件的绑定：注意es6的语法

可以在构造函数里绑定this:this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

.或者调用时绑定：onClick =

子页面向父页面传递参数的方法

在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递 好好理解这里的onChange事件，为什么不用onBlur

补充：this的指向：类的方法内部如果含有this，它将默认指向类的实例。