React学习历程

Mook教程笔记

1简介

颠覆式UI前端框架
Google Angular不适合移动端
Facebook的React不是一个完整的mvvm和mvc,轻量,组件化开发

2react html css在js中改变css样式:fontSize(驼峰式命名方法)

3生命周期
this和apply call bind
unmounting mounting updating

菜鸟教程笔记

1,引入文件

react.min.js:React的核心库

react-dom.min.js:提供DOM相关的功能
babel.min.js:Babel可以将ES6代码转换为ES5代码,这样我们就能在目前不支持ES6浏览器上执行React代码。Babel内嵌了对JSX的支持。通过将Babel和babel-sublime包(package),

2,JSX
JSX优点:
JSX执行更快,因为他在编译为JS代码后进行了优化
它是类型安全的,在编译时就能发现错误
使用JSX编写模板更加简单快速
注意:自定义的React类名以大写字母开头


state和props的主要区别在于props是不可变的,而state可以根据用户交互来改变。这就是为什么有些容器组件需要定义state来更新和修改数据。而子组件只能通过props老通过props来传递数据

React组件API
设置状态:setState
替换状态:replaceState
设置属性:setProps
替换属性:replaceProps
强制更新:forceUpdate
获取Dom节点:findDOMNode
判断组件挂载状态:isMounted

React组件生命周期
组件的生命周期可分为三个状态:
Mounting
Updating
Unmounting

阮一峰React教程笔记

JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

JSX语法里面的注释是{/*    */}

看完了阮老师提供的例子,在单文件里,新建组件,然后在reactDOM.render(<组件名/>,document.getElementById('ID名'));


下一步打算:前置课程的学习,对React有系统的认识。现在准备开始撸项目,项目驱动学习。我会继续更博的。

目前觉得哔哩哔哩的这个实战课程,就十节,不会枯燥做一个迷你记账簿出来。

你可能感兴趣的:(React)