React简介

随着前端技术的发展,页面重构和复用变得越来越重要,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是功能性的组件。
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值