这里主要讲组件的种类和组件的状态管理
组件
组件，从概念上类似于 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中多种方式指定
- 表达式
- 字符串字面量
- 如果没有给prop赋值,它的值默认为true
