React学习笔记

相关知识点：

ES6:

笔记：ES6学习笔记
资料：阮一峰ES6

node.js:

官网下载安装。
检查安装成功的命令： node -v(node版本查询) npm -v(npm版本查询)
cnpm:淘宝镜像

webpack:

待补充：

window命令：

cd 定位到目录，用法：cd + 路径
dir 列出文件列表
cls 清空命令提示符窗口内容
cd.. 定位至上层目录
待补充。

React:

React基础知识、

React：用于构建用户界面的 JavaScript 库
特点：

• 声明式：React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。（以声明式编写UI，可以让你的代码更加可靠，且方便调试。）
• 组件化：创建好拥有各自状态的组件，再由组件构成更加复杂的界面。（无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。）

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内置表达式

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

二：Props属性

• props 对于模块属于 外来 属性
• 传递参数：<BodyIndex username='liuxilei'/>
• 模块中接收参数：this.props.username

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

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

• 可以在构造函数里绑定this:this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  .或者调用时绑定：onClick = {this.changeUserInfo.bind(this,50)}

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

• 在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递
• 好好理解这里的onChange事件，为什么不用onBlur
  补充：this的指向：类的方法内部如果含有this，它将默认指向类的实例。MDN

四：可复用组件，真正让React开发快速、高效的地方

Prop验证

• https://doc.react-china.org/docs/typechecking-with-proptypes.html
• 注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。！！！！

默认Prop值

• const defaultProps = {text:’Hello world’};
• 使用方法：BodyIndex.defaultProps = defaultProps;

传递所有参数的快捷方式

• <Component{...this.props} more={'values'}/>

五：组件的Refs

操作DOM的两种方法

• 原始获取方法：var myDiv = document.getElementById('myDiv');React.findDOMNode(myDiv).style.color = 'red';
• （推荐使用）方法二的定义：<input ref='myInput' />
• 方法二的获取：this.refs.myInput
• Refs是访问到组件内部DOM节点唯一可靠的方法
• Refs会自动销毁对子组件的引用
• 不要在render或render之前对Refs进行调用
• 不要滥用Refs

六：独立组件间共享Mixins

• 不同的组件之间共用功能、共享代码
• 和页面具有类似的生命周期
• ES6下的使用要安装react-mixins