创建组件
引入文件 提供 react reactdom对象 帮助浏览器解析jsx
组件名一定要大写
let Component = React.createClass({
render(){
return ( jsx )
}
})
ReactDOM.render(组件名，要挂载的元素)
数据承载
state 组件内部的数据 可以尽心修改 getInitailState 生命周期初始化
props 来自于组件外部的数据 组件内部不能修改
用过getDefaultProps 进行初始化
外部传递和组件内部初始化同时存在以外部传递优先
数据绑定
{} 存放变量表达式
- 基本数据类型 数字 字符串 基本用户
- 对象 不能直接绑定
- 数组 数组的每一项都会被拆分出来
- 布尔值 null undefined 在页面不会直接显示 配置3元表达式或者其他的表达式
指令
react中不存在这种东西 我们自己去实现相同的效果
列表渲染
数组在绑定的时候会被拆解开来 通常结合map实现对数据的处理
条件渲染
a. 三元表达式控制渲染
b. || 或运算符控制渲染
c. 函数的返回控制渲染
属性绑定
希望属性的值是变量
《img src={变量或者表达式} 》
注意类名要用className
事件绑定 v-on:click
react事件和原生事件类似只需要把事件名写成小驼峰就ok
原生
react
onClick={(e)=>{
事件处理代码
}}
- 不带参数 默认参数是事件对象 千万别加()
onClick={this.fun} - 带参数 通过bind实现 默认参数会放到最后方
onClick={this.fun.bind(null,4,6)}
数据变页面变不变
react 中不像vue有数据响应式 要通过setState触发页面的修改
this.setState({要修改的数据:修改的内容},cb)
setState 是一个异步方法参数一时要修改的数据
参数2是修改成功之后的回调
组件嵌套
react不想vue 全局和局部组件之分
组件的嵌套关系随意 虽在外部谁是爸爸
插槽
和vue中组件标签汇总存放的内容默认不会被渲染 react中没有slot
组件对象下 props.children可以用来获取组件标签中的内容
ref
可以绑定dom 也可以绑定组件
通过组件对象下的 refs进行获取
react组件通信
父子通信 props refs
子父通信 props
亲兄弟通信 状态提升
远亲通信 全局状态管理 redux
组件的创建
createClass 方法
通过class关键字或者函数来创建组件
类组件函数组件
类组件 (功能组件，智能组件)
class关键字 创建的组件
有state值 能修改state值
能写jsx
有生命周期
函数组件 (ui组件,木偶组件,傻瓜组件)
用函数创建的组件
没有state 就不能修改数据
没有生命周期
只能接收props 渲染界面
高阶组件
受控组件 非受控组件
不是一种新的组件而是获取表单数据中的方式
受控组件
非受控组件 通过ref 来获取表单数据
react developer tool
谷歌浏览器插件 使用方式类似vue开发者工具
Fragment
可以作为跟组件使用并且不会被渲染
生命周期
创建和初始化
getDefaultProps 初始化porps
getInitialState 初始化state
15.6 的生命周期 在16版本取消 用构造函数代替
挂载
componentWillMount 挂载之前
componentDidMount 挂载结束
更新
componentWillReceiveProps props发生改变的时候触发
shouldComponentUpdate 数据的改变是否应该引起页面更新
componentWillUpdate 组件将要更新
componentDidUpdate 组件更新完毕
卸载销毁
componentWillUnmount
react 脚手架工具
npm install create-react-app -g
create-react-app -V 查看版本号
create-react-app 项目名字 创建项目
注意:部分插件的版本依赖问题 需要打开package.json 里的scripts 下的eject
npm run eject
打开大礼包之前执行一次本地git仓库的提交
git status 查看当前状态
git add .
git commit -m “hehe”
npm run eject 在项目目录下执行
npm start 跳转的实例界面
基本命令
npm start 本地开发环境运行
npm run eject 解开插件包
npm run build 编译打包
基本结构目录
build 打包之后的文件目录
config 项目的配置目录
public 静态资源目录
script js启动脚本
src 项目的源码目录
package 项目的配置依赖
.gitignore git 上传的忽略文件
