1. react 介绍 和 想法
- A declarative, efficient, and flexible JavaScript library for building user interfaces
- react是一个专注于UI的库
- 状态机 输入 => 组件 => 输出
- 组件化 react组件映射 为原生android组件 原生ios 组件 react vr
2. jsx 语法
JSX就是Javascript和XML结合的一种格式，要使用需要在babelrc里配置, Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用
// 最外层必须有一个元素包裹
hello world!
// 属性都要驼峰
// 样式
// 变量
{user.name }
// 事件
// 遍历
{
list.map(
({name, value}) => - {name}
)
}
// 展开对象
const props = {name: "tom" }
3 虚拟DOM 和 diff 算法
a. 虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs 再更新到真实DOM中
b. 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)
c. 开发者可以通过key属性指定不同树中没有发生改变的子元素
d. diff算法的核心就是同级比较
4. state 和 props
- react 数据是单向流动的 数据自顶向下流动 ,
- props是传递来的参数，从父级组件向子组件传递的数据, 是只读的
- state是自己的内部状态
- 在react更新生命周期setState会导致死循环
// 默认参数
Main.defaultProps = {
list: [ ]
}
// setState 是异步的
this.setState( (prevState,props) => ({
text: prev.text + "-ha"
}))5. 生命周期
Note: 父子组件的挂载顺序，更新顺序
6 函数式编程
- 函数式编程,函数作为一等公民，而不是类和对象
- 纯函数 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数
- 高阶函数 函数的参数可以是函数，返回值也可以是函数 , 如数组的
forEach map filter some reduce ,setTimeout setInterval等
- 柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数
6 无状态组件
顾名思义，它没有state，接收props，它是一种只负责展示的纯组件 使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，多写无状态组件
function HelloComponent(props) {
return Hello {props.name}
}
ReactDOM.render(7 使用 fragment 碎片
Jsx 要求返回的元素，必须有东西包裹,使用碎片可以减少一层DOM
Hello
World
// 可以简写为
<>
Hello
World
8 使用context
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性，React.createContext 创建一个context，一个context包含provider（数据提供者）, comsumer(数据消费者), Provider 有一个value参数，用来覆盖创建时的默认值
// 创建一个 theme Context, 默认 theme 的值为 light
const ThemeContext = React.createContext ('light');
function ThemedButton(props) {
// ThemedButton 组件从 context 接收 theme
return (
{theme => }
);
}
// 中间组件
function Toolbar(props) {
return (
);
}
}9. mobx
推荐一个react模块的目录结构
/states 状态
/(widgets|components)各类组件、弹窗等
index.js
index.less
service 建议放在config里，全局统一
Computed用于生成计算数据，autorun类似用来监听某一数据改变而作出反映
import {action, observable ,autorun} from 'mobx';
import StateAdd from "./add"
class State {
constructor(){
this.$add = new StateAdd(this);
}
// 显示
@observable show = false;
// query
@observable query = {
trade: null,
type: 1
}
/**
* @name 获取列表
*/
@action getList = () => {
}
}
const instance = new State();
autorun(() => {
if(instance.show){
console.log("打开弹窗了")
}
})
export default instance10 高阶组件
主要有两种实现方式属性proxy、继承实现
通常使用装饰器模式调用,常见的有mobx的 @observer, react-router的withRouter等
------ 属性proxy 实现如下
import React from "react"
export default class extends React.Component {
render = () =>
{this.props.name}
}
/**
* @name 操作props
*/
function Hoc1(Component){
return class extends React.Component {
render = () =>
}
}
const Hoc2_text = Hoc2(Text2);
function Hoc3(Component){
return class extends React.Component {
getRef = _ref => {
this.refs = _ref;
}
render = () =>
}
}
------ 继承组件 实现如下 -------
class Text extends React.Component {
render(){
return (
this is text
)
}
}
// 生命周期可以覆盖掉
const hoc2 = Component => {
return class NewHoc extends Component {
static displayName = `NewHoc-${Component.displayName || Component.name}`
render(){
const element= super.render();
console.log(element)
const style = {
color: element.type === 'div' ? 'red' : 'green'
}
const newProps = {...this.props, style}
return React.cloneElement(element, newProps, element.props.children)
}
}
}
const NewCom = hoc2(Text)11 注意事项
- React组件名字大写
- 不能直接修改state props
- 更新函数里不能做状态操作(死循环)
- 多用无状态组件
- 多用pureComponent React.PureComponent 通过prop和state的浅对比来实现 shouldComponentUpate()。
- 代码清晰，一目了然，注释写好
- 过度封装不如不封装
- 使用 ImmutableJS 处理数据提升性能