随着前端技术的发展,页面重构和复用变得越来越重要,React提出的组件化,所谓组件化就是页面划分为一个个组件,组件与组件之间相互独立,可以复用。
具体怎么将页面划分为组件,React都已经帮你做好了。从一个最简单的例子来说明为什么要组件化。
例如定义了一个功能样式非常完备的button
--html结构
<button onclick="btClick" id="bt">clickMe</button>
--css样式
#bt{
/*定义了一系列非常棒的样式*/
}
--js
function btClick(){
console.log("Button Clicked!");
}
如果我要引用地方引用这么button怎么办?如果没有组件化,那么只有Copy了。。。。。。
看看React怎么解决这个问题
//React使用了jsx语法,大家不要太在意这个语法,虽然一开始觉得很丑,界面和功能耦合性太大,但是用起来就可以了,觉得不太习惯的小伙伴,可能是界面样式功能分离做的太好了,等你用了一段时间,你发现还是tmd丑
//使用bind的目的是显式指定作用域,这也是告别js原生大坑的推荐做法,我管你是什么作用域,显式制定就ok了,还有一种更好的方式就是i箭头函数
class Bt extends React.Component{
btClick(){
console.log("Button Clicked!");
}
//使用箭头函数
btClick=()=>console.log("Button Clicked");
render(){
return(
<button onClick="this.btClick.bind(this)" className="bt">click Me</button>
//使用箭头函数就不用bind(this)了,直接使用就可以了,可以说箭头函数自动绑定了bind
)
}
}
export default Bt;
如果要页面复用这个组件怎么办?
impoort Bt from '你的样式定义的路径'
ReactDOM.render(){
<Bt/>,document.getElementById("test")
}
那么组件化的 好处就体现出来了:copy--麻烦--结构化不够;组件--简单--结构化良好
组件让你不用关心内部是怎么实现的 ,拿来用就可以了。
如果懂java的童鞋,是不是觉得很熟悉,对了!所谓的组件化,就是把页面的样式、功能组合在一起,实现复用,与java类似的是,java是功能性的组件。