思考:React组件不是一个轻量级的框架。
组件状态:
组件编写的时候,一定牢记这三个过程和状态,你在每个阶段的操作,是否需要在其他阶段进行清除作用。比如,订阅操作,监听事件的操作。
- 1、初始化
- 2、运行状态
- 3、卸载状态
举个例子来说:
class Mars extends Component() {
handleClick = () => {
console..log('click');
}
componentDidMount() {
window.addEventListener('click', handleClick);
}
componentWillUnMount() {
window.removeEventListener('click', handleClick);
}
render() {
return <p>{`this is a test`}</p>
}
}
组件划分
组件界面上并行、功能上包含关系。
划分组件不能按照界面的层次结构来进行划分,应该按照功能层次划分,切勿先入为主。
组件组合
React组件的包裹性vs继承官方介绍
组件:丰富的组件去渲染低功能的组件
继承:需要实现
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
ReactDOM.render(
<WelcomeDialog />,
document.getElementById('root')
);
其中的一种划分就是containerComponent组件和presentComponent,举个例子来说:
class FetchDataFromServer extends Component() {
constructor(props) {
super(props);
this.state = {
name: ``
}
}
componentDidMount() {
fetch('get data url').then((response) => response.json).then(jsonData => this.setState(
data: jsonData
))
}
render() {
return <Present data = {this.state.data}/>
}
}
function Present ({data}) {
return <p>{data}</p>
}
有状态组件和无状态组件
其实,无状态组件、无状态函数组件、函数组件是有一定区别的。
- React的函数表达
function TimeClock(props) {
return <p>{props.name}</p>
}
TimeClock.defaultProps = {
name: `time: ${new Date()}`
}
有状态的组件无渲染,有渲染的组件无状态,获取数据的组件和渲染组件分开。
如何复用一个有状态组件?
官方例子,但是官网的例子可能不太常用,那我举一个简单的例子。
需求背景:在实际开发过程中,大家肯定遇到过类似的操作,就是针对具体的权限去展示不同的组件,我感觉大家一般情况下都会这么做:
// 假设权限有one、two、three
fucntion Post ({one , two, three }) {
return !one ? !two? : <p>`three`</p>: <p>`two`</p>: <p>`one`</p>
}
但是如果我想在其他地方复用这权限怎么办?比如我想具有权限一的时候展示一个组件,具有权限二的时候展示另一个?
当然如果你乐意,可以写n个像上面的组件,但是这就实现不了组件的复用了。比较好的方式是实现一个可复用的状态组件类似于这样:
<Auth showAuth = ['one']>
<One/>
</Auth>
这样应该怎么实现呢?
// @connect
function Auth ({haveAuth, showAuth, children}) {
isHaveAuth = () => [
if (Array.isArray(showAuth)) {
// 针对数组权限进行操作,建立合适的约定
} else {
return haveAuth.indexOf(showAuth) > -1;
}
}
return isHaveAuth && children;
}
这样你每次实现只需要把用户的权限和应该要展示的传入就Ojbk了,当然如果你使用redux, 可以默认传入用户的auth,这样每次调用的时候不用自己传入了
<Auth showAuth = 'one' ><One/></Auth>
<Auth showAuth = 'one' ><Two/></Auth>
<Auth showAuth = 'one' ><Three/></Auth>
具体的Auth改造看你自己了。
另一种方式就是高阶组件,记住一点,高阶组件的包装一定要在render之前,不然会出现性能问题。