Recat.js
- PHPz原創
- 2017-04-04 10:14:272255瀏覽
0. 前言
“任時光匆匆流去，我只在乎你”，最近這些時間都沒怎麼更新文章，希望大家不要見怪啊，哈哈！最近公司在做recat.js項目，然而我不是太熟，也是一個小白，也正在學習當中，然而大家如果有什麼好的學習文檔也可以留給我，謝謝大家了。
u=2186464112,3083010432&fm=23&gp=0.jpg
#1. 簡介
#React 是一個用來建立使用者介面的JAVASCRIPT 函式庫。
2.特點
聲明式設計 −React採用宣告範式，可以輕鬆描述應用。
高效能 −React透過DOM的模擬，最大限度地減少與DOM的交互作用。
靈活 −React可以與已知的函式庫或框架很好地配合。
JSX − JSX 是 JavaScript 語法的擴充。 React 開發不一定使用 JSX ，但我們建議使用它。
元件 − 透過 React 建構元件，使得程式碼更容易被重複使用，能夠很好的應用在大專案的開發中。
單向回應的資料流− React 實現了單向回應的資料流，從而減少了重複程式碼，這也是為什麼它比傳統資料綁定更簡單。
3. 要點
在說程式碼的前提下，我想說幾點比較重要的幾點：
4. 程式碼實作1.在title下面先引入幾個檔案
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../lib/browser.min.js"></script>
2.程式碼
- script type 的類型babel
- #包含節點只能一個 ##元件一定要有閉合
- 可以用es6語法也可以用es5語法
- 3. HTML裡面有個容器
<p id="demo"></p>
4. js程式碼
<script type="text/babel">
class Hello extends React.Component{
getDate(){
return new Date-0;
}
render(){
var name = this.getDate();
return (
<p>
<p>123</p>
<p>hello,{this.getDate()}</p>
<input type="text"/>
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
除了那些我們寫好的原生的HTML p 標籤，recat裡面我們可以自訂標籤，它呢代表並不是一個真實的
DOM節點，在recat看來，它只是recat Components的實例而已，那這些recat Components是怎麼呈現在頁面中的呢，就是調用recat裡面render()這個方法，第一個參數是我們要渲染的recat Components，第二個參數Components渲染完之後要插入的位置的容器element，綜上所述也就是將hello這個渲染結果插入到ID為demo的element容器裡。 那麼我們看一下渲染結果
#Paste_Image.png
那麼在看一下咱們渲染之後的頁面結構
Paste_Image.png
屬性
，這個是recat內部給你做的事情，因為我也是初學者，不太明白，當然你知道了，可以告訴我。 還有添加一些樣式都怎麼添加，還可以這樣添加。
5. HTML結構程式碼
對，你猜對了，還是這個結構程式碼，一個簡單的容器
<p id="demo"></p>
6. CSS代码
在这里我设置的是我在recat 那个render()方法里的一个className的p，为什么叫className，因为class是js里的保留字，所以我们得用className这个属性，而且我们这样写也是设置样式的一种方式。
<style type="text/css">
.demo{
font-size: 50px;
}
</style>
7. js代码
下面你要注意我写的render()方法里的东西，还有另外一种设置样式的方式，那就是设置内联样式，为什么不直接设置fontSize:50,backgroundColor:'red',color:'#fff'”？因为recat这里不支持是字符串的形式，要写一个对象，key和value这样的方式，它才可以解析。
<script type="text/babel">
class Hello extends React.Component{
render(){
var name = "刘玉森";
var style={fontSize:50,backgroundColor:'red',color:'#fff'};
return (
<p>
<p className="demo">123</p>
<p style={style}>hello,{name}</p>
<input type="text"/>
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
展示出来之后的结果
Paste_Image.png
props在recat中是很重要的一个方法
Paste_Image.png
8. HTML容器
这里呢容器没有变，还是那个容器
<p id="demo"></p>
9. js代码
<script type="text/babel">
class Hello extends React.Component{
render(){
return (
<p>
<p>123</p>
<p>hello,{this.props.name}</p>
</p>
)
}
}
class Hello1 extends React.Component{
render(){
return (
<p>
<p>123</p>
<p>hello,{this.props.address}</p>
</p>
)
}
}
class Parent extends React.Component{
render(){
return (
<p>
<Hello name={this.props.name}/>
<Hello1 address={this.props.address}/>
</p>
)
}
}
ReactDOM.render(
<Parent name="刘玉森" address="110"/>,
document.getElementById('demo')
)
</script>
这里呢我就得大家说一下我的那个代码，首先呢，我先自定义了一个parent这个标签，然后我创建了一个parent这个组件，我利用this.props把组件外向组件内传值，然后我再创建俩个hello，hello1的组件，获取父元素parent里的值。
看一下页面渲染之后的效果
Paste_Image.png
再看一下页面渲染之后的页面结构
Paste_Image.png
10.HTML代码
依然还是这个容器
<p id="demo"></p>
11. js代码
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<ul>
<li>00000000</li>
{
this.props.children.map(function(item){
return <li>{item}</li>;
})
}
</ul>
)
}
}
ReactDOM.render(
<Hello>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
<p>44444444</p>
</Hello>,
document.getElementById('demo')
)
</script>
这里呢，我们先写一个li跟我们循环遍历出来的li做个鲜明的对比，这里就利用this.props.children这个方法来读取组件内部的子标签，可以该数组进行遍历
那么我们看下渲染之后的结果
Paste_Image.png
还有我们渲染之后的页面结构
Paste_Image.png
12. HTML代码
容器......
<p id="demo"></p>
13. js文件
先写一个我遇到的坑
<script type="text/babel" >
class Hello extends React.Component{
getDefaultProps(){
return {
name : "刘玉森"
};
}
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
这样定义组件你会发现，它不显示，因为使用 Component 定义的组件不能这样去设置默认值
看一下显示的结果
Paste_Image.png
是吧，它不显示，我也是醉了！！！
下面就演示一下正确的写法，下面是见证奇迹的时刻了！
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
Hello.defaultProps = {
name : "刘玉森"
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
实践是检验真理的唯一标准，来啊互相伤害啊！看图说话
Paste_Image.png
厉害了，我的哥！就想问还有谁，低调啊，这也是我试出来的,慢慢摸索来的...
14. HTML文件
容器还是容器
<p id="demo"></p>
在recat里面我们添加一些事件怎么做到呢？
15. js文件
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
alert('Hello');
}
render(){
return (
<p>
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
bind这个方法，它是es5里的方法，可以改变this的指向，详细请你自己查询一下，我解释的不是太好。
那么看一下渲染页面之后的结果
GIF.gif
ref标签的属性，可以从组件中获取真实的DOM节点，也可以绑定事件
Paste_Image.png
16. HTML代码
容器...
<p id="demo"></p>
17. js代码
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
this.refs.iptText.value = "hello,刘玉森";
}
render(){
return (
<p>
<input ref="iptText" />
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
看一下渲染之后的结果
GIF.gif
通过ref这个标签的属性来绑定标签，在添加一个点击事件，调用clkFunc这个函数执行里面的语句，然后把值传入input框内，渲染页面。
下面说一下recat的生命周期，在创建到销毁的生命周期，状态和属性在生命周期中是如何流转的？那么首先要了解recat在浏览器中存在的三个状态，分别是mounted、update、unmounted，代表的含义是安装(实例化)、更新(存在期)、销毁(清理)。
timg.jpg
mouted 是指recat components被render这个方法解析生成对应的DOM节点并插入浏览器的DOM结构的一个过程。
update 是指一个mounted的recat components被重新的render的过程
unmounted 是指一个mounted的recat components对应的DOM节点被从DOM结构中移除的这样一个过程
每一个状态recat都封装了对应的hook函数，翻译成中文就是“钩子函数”，WINDOW的消息处理机制为了能在应用程序中监控系统的各种事件消息，提供了挂接各种反调函数(HOOK)的功能。
如果让我们自己封装这样的hook函数，怎么设计封装？相信大多是人都i知道will和did，将要怎么怎么样和已经怎么怎么样，将要mounted、update、unmounted，和已经mounted、update、unmounted，事实上recat的设计思想也是如此，只不过人家比我们想的更加全面一些，更详细一些，那么来一张图片吧
timg.jpg
18. HTML代码
上容器
<p id="demo"></p>
19. js代码
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
opacity:0.1
}
}
componentDidMount(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -=0.05;
if(opacity<0.1){
opacity=1
}
this.setState({
opacity:opacity
})
}.bind(this),100)
}
render(){
return (
<p style={{opacity:this.state.opacity,fontSize:50}}>
这个是测试react的生命周期
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
这里我们可以调用两个函数，componentWillMount和componentDidMount的两个方法，这两个函数的区别是componentWillMount在mounting前被调用，componentDidMount在mounted后被调用，然后测试一下recat的生命周期
看一下渲染之后的页面效果是什么样的
GIF.gif
刚才的代码中我有用到state这个方法，这个解释就是说，recat把组件看成状态机getInitialState，设置默认值，setState()可以修改state的值，每次state的值发生改变的时候，都会重新渲染UI
Paste_Image.png
20. HTML代码
这是这个文件的最后一个容器...
<p id="demo"></p>
21. js文件
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
name:'刘玉森',
address:'北京',
}
}
clkFunc(){
this.setState({
name:'liuyusen',
address:'BeJing'
})
}
render(){
return (
<p>
<p>hello,{this.state.name},{this.state.address}!!!</p>
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
这里我有一个点击按钮，当我点击按钮的时候，改变state的值，props和state差别，props一般情况下我们通过组建调用方，在调用组件的时候指定的，props一旦指定了在一般情况下是不会改变的，而state是私属于当前组件的，state的值是可变的，正所谓“props是专情的，state是花心的”，怎么样修改state的值呢？那么就要用到setState这个方法来修改state的值。
看一下刚才的代码渲染之后的页面效果
GIF.gif
5. 結論
我知道我寫的文章可能不是太好，可能存在許多的問題，當然也需要大家的指點，最後希望我寫的文章能給大家帶來幫助！ ！ ！
以上是Recat.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！