组件编写

思考：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()}`
}

有状态的组件无渲染，有渲染的组件无状态，获取数据的组件和渲染组件分开。

React 设计原则

如何复用一个有状态组件？

官方例子，但是官网的例子可能不太常用，那我举一个简单的例子。
需求背景：在实际开发过程中，大家肯定遇到过类似的操作，就是针对具体的权限去展示不同的组件，我感觉大家一般情况下都会这么做：

// 假设权限有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之前，不然会出现性能问题。

性能永远不是你首先考虑的因素