第一周第二篇
组件化必须考虑的问题
首先我们要明确为什么要进行组件化开发？组件化是为了抽离一些公共的逻辑组件，主要以UI开发为目的的交互逻辑区域功能的封装，在这里要区分mixin和组件化的区别，mixin更多是对通用js逻辑代码的封装，而组件的封装更多是为了满足当前需求中可能出现样式或者逻辑交互类似的开发中，为了尽量减少频繁的写相互类似的代码，而且当产品需求出现变更时可以在一处修改改变所有对引入组件的位置，可提高维护性。并且在开发相同技术栈的项目时。如果组件封装的足够抽象可以实现直接引入之前开发的组件而减少重复造轮子的问题
如何进行组件化开发
好的组件化开发方式主要要考虑封装性和复用性，组件自身的ui样式动画交互等尽量封装在组件内部，以vue组件化方式为例，组件要做到可插拔，即开发组件要将其自身的css/html/js/组件固有的静态资源封装在组件内部以包的形式存储，做到该组件与其他代码无耦合，同时按照模块化的方式进行组件化开发以此来减少非模块化方式中出现的那种引入顺序需要固定，且大量抛漏全局变量。定制化需求如在该组件上拓展其他html元素及其对应的业务代码逻辑以props的方式传入该组件中。组件开发也要考虑基础组件主要是用来做什么的。例如按钮组件主要是需要封装按钮中需要传入的回调函数和按钮的文案内容，考虑复用性还要给按钮自定义样式，且除了传入属性，组件自身也会有默认的展示。组件的封装要做到除了必传内容外，其他功能要做到不传也不会出现任何问题。要做到拓展的功能业务代码要写在引入该组件的代码上
组件通讯
我们引入组件的目的方便我们的后续开发，其中前端组件更多是偏向对服务端提交数据，上面说到组件是相对独立的，但是我们引入组件最终提交数据时可能会出现要提交我们在组件中操作的数据，假设我们在父组件中引入子组件，将父组件数据进行提交，提交内容若干，包括引入的子组件数据，那么我们现在要面对的问题就是，自组件如何将数据传递给父组件，父组件获取真实数据，最终将数据完全的提交上传。在vue中我们可以使用观察者模式 emit/on的方式进行子组件向父组件传递数据，父组件以props方式去向自组件传递数据。因为我们组件化开发不能直接修改父组件数据，所以当要进行子组件内数据变化时，采用子组件派发emit，父组件监听事件。对数据修改，然后重新将修改后的数据传递回子组件内部，以此来实现完整的父子组件通讯。在react中方式也类似，不过react中父组件是通过props方式给子组件传入修改state的函数。在子组件内部调用，从而修改父组件的数据。
使用ref
1.react中父组件可以通过在子组件中加上ref的方式获取子组件，并执行子组件的方法
// 父组件
<TextField
ref="otpCode"
inputType="number"
setCurrentInputData={this.setCurrentInputData.bind(this)}
propValue={this.state.otpCodeJSON}
stateName={'otpCodeJSON'} />
// 调用
this.refs.otpCode.handleBlur();
2.通过ref来获取实际的dom元素
// refs 通常被赋值给实例的一个属性，这样你可以在组件中任意一处使用它们.
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
// 挂载在jsx中的标签上
<input
ref={this.inputRef}
type={inputType} />
// 访问 Refs， React 会在组件加载时将 DOM 元素传入 current 属性
// 在卸载时则会改回 null。ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。
this.inputRef.current;
// 打印this.inputRef.current;会拿到真实的dom
