共计 4403 个字符，预计需要花费 12 分钟才能阅读完成。
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() 的方法调用
// 最外层必须有一个元素包裹
<div>hello world!</div>
// 属性都要驼峰
<div className=”haha” ></div>
// 样式
<div style={{marginTop: ’10px’}}></div>
// 变量
<div> {user.name}</div>
// 事件
<button onClick={}> click me </button>
// 遍历
<ul>
{
list.map(
({name, value}) => <li key={name} value={value}>{name}</li>
)
}
</ul>
// 展开对象
const props = {name: “tom”}
<div {…props}></div>
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 <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name=”marlon” />, mountNode)
7 使用 fragment 碎片 Jsx 要求返回的元素，必须有东西包裹, 使用碎片可以减少一层 DOM
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
// 可以简写为
<>
<td>Hello</td>
<td>World</td>
</>
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 (
<ThemeContext.Consumer>
{theme => <Button {…props} theme={theme} />}
</ThemeContext.Consumer>
);
}
// 中间组件
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value=”dark”>
<Toolbar />
</ThemeContext.Provider>
);
}
}
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 instance
10 高阶组件
主要有两种实现方式属性 proxy、继承实现 通常使用装饰器模式调用, 常见的有 mobx 的 @observer, react-router 的 withRouter 等
—— 属性 proxy 实现如下
import React from “react”
export default class extends React.Component {
render = () =>
<div>
<div>
<Hoc1_text name={‘Hoc1_text’}/>
</div>
<div>
<Hoc2_text />
</div>
</div>
}
class Text1 extends React.Component {
render = () =>
<div>
this is simple text <br/>
{this.props.name}
</div>
}
/**
* @name 操作 props
*/
function Hoc1(Component){
return class extends React.Component {
render = () =>
<div className=’hoc1′>
<Component {…Object.assign({} , this.props, {gen : ‘111’})}/>
</div>
}
}
const Hoc1_text = Hoc1(Text1);
class Text2 extends React.Component {
render = () =>
<div>
<input type=”text” value={this.props.value} onChange={this.props.change}/>
</div>
}
/**
*@name 抽离 state
*/
function Hoc2(Component){
return class extends React.Component {
state = {
value: ’11’
}
change = e => {
this.setState({
value: e.target.value
})
}
render = () =>
<div>
<Component value={this.state.value} change={this.change}/>
</div>
}
}
const Hoc2_text = Hoc2(Text2);
function Hoc3(Component){
return class extends React.Component {
getRef = _ref => {
this.refs = _ref;
}
render = () =>
<div>
<Component ref={this.getRef}/>
</div>
}
}
—— 继承组件 实现如下 ——-
class Text extends React.Component {
render(){
return (
<div>
this is text
</div>
)
}
}
// 生命周期可以覆盖掉
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 处理数据提升性能
