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是功能性的组件。