-
React , JSX, Props/State, Context
查看全部 -
ref 接受回調函數 拿到DOM節點
查看全部 -
react 生命週期
查看全部 -
State值是不能直接修改的 唯一修改的途徑是調用setState方法
查看全部 -
props 是纯函数, 值不能改变.
查看全部 -
状态提升: 将变化的state放在父组件统一管理.
单向数据流,不同于双向绑定.
查看全部 -
受控组件(state)，与 非受控组件(ref)。
查看全部 -
如果不用箭头函数，则需要绑定this。
onClick{ () => {this.increaseLikes() }}
绑定方法1：
onClick={this.increaseLikes.bind(this)
绑定方法2：
this.increaseLikes = this.increaseLikes.bind(this)
查看全部 -
组件初始化
constructor componentDidMount
组件更新
New props setState() forceUpdate() —>render componentDidUpdate
组件卸载
componentWillUnmount
举例：电子钟表
初始化当前时间
组件添加定时器
组件删除
查看全部 -
Props（属性）
组件—函数，输入—输出
V = f(props)
例： 一张名片
样式：bootstrap foo，通过npm安装在my-first-react工程文件夹中
在index.js中引用bootstrap
属性是只读的
纯函数：不改变函数的值
非纯函数
jsx只支持纯函数
查看全部 -
这奇怪的HTML被编译成什么？
BABEL在线编译工具（JSX是语法糖，会被编译成js代码）
JSX基本原理：一种语法糖，---替代React.createElement()
返回的是ReactElement对象，此对象的属性比较复杂，本质上是Object
查看全部 -
#Readme
项目文档
#package.json
项目依赖、命令
#public公共文件
index.html：主页 root节点是程序的主入口
#src文件
app文件与样式文件
#新建组建(使用es6的语法)
1，src文件夹下，创建Welcome.js
2，引入依赖 import
3，新建类 extends React.component
4，新建render(){}方法，显示结果
return <h1> Hello React</h1>
5，导出整个类
export default Welcome
6，把Welcome component挂在到节点上
打开index.js，使用ReactDOM进行挂载
查看全部 -
3，cd 打开项目 以及 运行项目
npm start 运行服务
查看全部 -
# 准备开发环境
1，官方脚手架工具 create-react-app
所需工具：terminal，node（版本大于6.5），npm
npm install create-react-app -g
2，创建项目
create-react-app my-first-react(项目名)
开始自动安装依赖，耗时大概几分钟。
查看全部 -
第一章： 了解react
react 是一个UI库，相当于MVVM中的V
react - a javascript library for building user interfaces
react 受欢迎的原因：
声明式写法-注重结果（相对于命令式-注重过程）// todo 了解这两个思想
组件化，一切基于组件
一处学习，随处编写（web、native）
不过我觉得以上这些原因都太....不符合现实情况了，都是场面话。
react受欢迎的原因，我觉得一是因为facebook，
二是因为生态好，圈子活跃，成熟解决方案较多（1st）
三是相比于angular入门门槛低（也是vue崛起的原因之一），
四是出于前端架构师们的个人喜好吧，目前看来react的爱好者更多一点
查看全部
举报