这里主要讲组件的种类和组件的状态管理

组件

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素

组件是抽象的成独立功能模块, react应用程序由组件构建而成.

class组件
class组件通常拥有状态和生命周期,继承于Component,实现rander方法(React.Component的子类中必须有rander()函数).
function 组件(hooks 单独讲)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

注意：组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome

以小写字母开头的元素代表一个 HTML 内置组件，比如 <div> 或者 <span> 会生成相应的字符串 'div' 或者 'span' 传递给 React.createElement（作为参数）。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件，如 <Foo /> 会编译为 React.createElement(Foo)。

组件化优点

增强代码重用性，提高开发效率
简化调试步骤，提升整个项目的可维护性
便于协同开发
注意点:降低耦合性

组件通信(React>=16.3)

props方式父->子
状态提升子-> 父(子props接受父组件的一个函数传参)
context 组件夸层级通信

使用Context

在Context模式下有两个角色:

Provider:外层提供数据的组件
Consumer :内层获取数据的组件

export const Context = React.createContext() // 可以自定义
// 下面 必须大写,因为是组件形式
export const Provider = Context.Provider// 提供者
export const Consumer = Context.Consumer //消费者

store = {}

function App() {
  return (
    <div className="app">
      <Provider value={store}>
        <Home />
      </Provider>
    </div>
  ); 
}


export default class Home extends Component {
  render() {
    return (
      <Consumer>
        {
          ctx => <HomeCmp {...ctx} />
          //固定使用模式,一定得是个函数
        }
      </Consumer>
    ) 
  }
}

// 使用HOC 

export const handleConsumer = Cmp => props => {
  return <Consumer>{ctx => <Cmp {...ctx}  {...props} />}</Consumer>;
};

// 调用

const HandleConsumer = handleConsumer(HomeHandle)
<HandleConsumer />

高阶组件-HOC

组件状态共享三种方法: 高阶组件, render props, 自定义hooks

为了提高组件复用率，可测试性，就要保证组件功能单一性;但是若要满足复杂需求就要扩展功能单一的组件，在React里就有了HOC(Higher-Order Components)的概念

//定义：是一个函数，它接收一个组件并返回另一个组件。

function Child(props) {
  return <div>Child-{props.name}</div>;
}
// 这里的Cmp是function或者class组件
// 这里这么多箭头是因为function或者class组件在虚拟dom中的type类型值是function,需要对其调用
const foo = Cmp => {
  return props => {
    return (
      <div className="border">
        <Cmp {...props} />
      </div>
    );
  };
};

或者优雅一点的写法
//这里的Cmp是function或者class组件
const foo = Cmp => props => {
  // console.log("foo", Cmp);
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};

调用
const Foo = foo(Child);
<Foo name="msg" />
或者
{foo(Child)({ name: "msg" })}

高阶组件可以链式调用

const Foo = foo2(foo(Child)) // 嵌套太深

更优雅的写法-装饰器

高阶组件本身是对装饰器模式的应用，自然可以利用ES7中出现的装饰器语法来更优雅的书写代码

// @foo
class Child extends Component {
  render() {
    return <div>Child-{this.props.name}</div>;
  }
}


@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

//处理原生标签
const fooHost = cmp => {
  console.log("fooHost", cmp);
  // return cmp;//返回原先的标签
  // return React.cloneElement(cmp, { className: "border" });
  // return React.createElement(cmp.type, { ...cmp.props, className: "border" });
  return <cmp.type {...cmp.props} />;
};

组件复合

// 不具名
<Layout showTopBar={true} title="首页">
        <div>
          <h3>HomePage</h3>
          <HandleConsumer />
        </div>
</Layout>

{this.props.children}

// 具名
  <Layout showTopBar={true} title="首页">
        {{
          btn: <button>提交</button>,
          txt: "内容"
        }}
  </Layout>

{this.props.children.btn}

Props

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props
JSX中多种方式指定
1. 表达式
2. 字符串字面量
3. 如果没有给prop赋值,它的值默认为true

组件和Props