关于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,它将默认指向类的实例。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180223A0IYUV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动