数据传递

套上高阶组件之后，ref不再能使用，要采取原始的方式

子调用父

数据
父组件传值<Child parentData={this.state}></Child>

子组件取值this.props.parentData，若取出父组件state中的值，则该值是共享的

方法
父组件中使用定义式
func = ()=> {
    
}

传递时
const funcs = {
    func1: this.func1
    func2: this.func2
    func3: this.func3
}
<child {...funcs}></child>

父调用子

• Ref

尚未使用

• Ref失效（高阶组件下）

在子组件的生命周期中，调用父组件方法，将自身this传递

组件结构

React的目录结构不同于Vue清晰

class

• class外部

1. import // 引入依赖包及组件
2. const // class外部变量，调用时不需加入this，但并不建议在此处定义变量
3. @decorator // 装饰器。个人感觉类似指令，等于是给类加了一个指令

• class(render外)

1. constructor // 构造函数在最前

constructor(props) {
    super(props);
    this.state = {
        // 1.存放需要更新视图的值
        // 2.需要长期保存的值
        dataType: 0 
    }
    this.dataBool = false // 会改变，但无需更新视图的值，放在此处
}
dataValue = 'value' // 不推荐class内部声明值, class内只放函数。

* 子直接更改this.props.xxx的值，可以将父组件的值同步更改

2. componentDidMount // promise请求，props还原
对下拉框，列表等数据进行渲染或还原。

• class(render内)

1 return前
对数据进行进一步处理，可以采取jsx，对每一个进行封装

2 return内
理想化状态是，只有组件和判断显示的逻辑

• 单项数据流

this指向

函数定义

• 声明式

function func() {
    // 常用声明方式
}

• 表达式

var val = function func() {
    // 不常用
}

表达式的使用场景
父组件方法传递给子组件
配合箭头函数使用将非常方便

func = () => {
    // 只有表达式才可以
}

函数调用

react在render中调用函数会出现this指向问题

目前有三种方法可破

• render中使用箭头函数

函数正常声明式，多数方法推荐这种写法

<input type="button" value="Log" onClick={() => this.logMessage()} />

• class中箭头函数

并不推荐的写法，除非要传递给子组件，则必须用此写法
logMessage = () => {
    console.log(this.state.message);
};

<input type="button" value="Log" onClick={this.logMessage} />

• es6 bind

// 函数定义
logMessage() {
    console.log(this.state.message);
}
// render
<input type="button" value="Log" onClick={this.logMessage.bind(this)} />

优化策略

css及单向数据流的缘故，导致react代码量，

要不断的拆，不仅是要拆组件，还要拆代码块

将请求，const，全部拆出主文件

block

至今尚未明确的地方

• 局部引入

组件的诞生，就是为了复用，少写重复的代码。
不懂为什么react，是每一个组件要用什么就引什么
而不是像Vue一样全局引入
例如每一个组件自动引入`import React,from 'react';`