首頁 > web前端 > js教程 > Recat.js

Recat.js

PHPz
發布: 2017-04-04 10:14:27
原創
2235 人瀏覽過

0. 前言

“任時光匆匆流去,我只在乎你”,最近這些時間都沒怎麼更新文章,希望大家不要見怪啊,哈哈!最近公司在做recat.js項目,然而我不是太熟,也是一個小白,也正在學習當中,然而大家如果有什麼好的學習文檔也可以留給我,謝謝大家了。

Recat.js

u=2186464112,3083010432&fm=23&gp=0.jpg

#1. 簡介

#React 是一個用來建立使用者介面的JAVASCRIPT 函式庫。

2.特點

  1. 聲明式設計 −React採用宣告範式,可以輕鬆描述應用。

  2. 高效能 −React透過DOM的模擬,最大限度地減少與DOM的交互作用。

  3. 靈活 −React可以與已知的函式庫或框架很好地配合。

  4. JSX − JSX 是 JavaScript 語法的擴充。 React 開發不一定使用 JSX ,但我們建議使用它。

  5. 元件 − 透過 React 建構元件,使得程式碼更容易被重複使用,能夠很好的應用在大專案的開發中。

  6. 單向回應的資料流− React 實現了單向回應的資料流,從而減少了重複程式碼,這也是為什麼它比傳統資料綁定更簡單。

3. 要點

在說程式碼的前提下,我想說幾點比較重要的幾點:

  1. 需要引入幾個文件,順序不能改變

    Recat.js

    Paste_Image.png

  2. ##元件式開發,什麼都是元件,裡面有什麼創建元件,props

    傳值啊,綁定事件啊等

  3. 插件,最重要的就是recat-router,

    路由

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容器裡。 那麼我們看一下渲染結果


Recat.js
#Paste_Image.png

那麼在看一下咱們渲染之後的頁面結構

Recat.js
Paste_Image.png

那麼現在看是不是已經把我說的全部都體現了出來,還有那個為data-recatroot的p,咱們好像沒有命名這個

屬性
,這個是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>
登入後複製

展示出来之后的结果

Recat.js

Paste_Image.png

props在recat中是很重要的一个方法

Recat.js

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里的值。

看一下页面渲染之后的效果

Recat.js

Paste_Image.png


再看一下页面渲染之后的页面结构

Recat.js

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这个方法来读取组件内部的子标签,可以该数组进行遍历

那么我们看下渲染之后的结果

Recat.js

Paste_Image.png


还有我们渲染之后的页面结构

Recat.js

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 定义的组件不能这样去设置默认值

看一下显示的结果

Recat.js

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>
登入後複製

实践是检验真理的唯一标准,来啊互相伤害啊!看图说话

Recat.js

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的指向,详细请你自己查询一下,我解释的不是太好。

那么看一下渲染页面之后的结果

Recat.js

GIF.gif

ref标签的属性,可以从组件中获取真实的DOM节点,也可以绑定事件

Recat.js

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>
登入後複製

看一下渲染之后的结果

Recat.js

GIF.gif

通过ref这个标签的属性来绑定标签,在添加一个点击事件,调用clkFunc这个函数执行里面的语句,然后把值传入input框内,渲染页面。

下面说一下recat的生命周期,在创建到销毁的生命周期,状态和属性在生命周期中是如何流转的?那么首先要了解recat在浏览器中存在的三个状态,分别是mounted、update、unmounted,代表的含义是安装(实例化)、更新(存在期)、销毁(清理)。

Recat.js

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的设计思想也是如此,只不过人家比我们想的更加全面一些,更详细一些,那么来一张图片

Recat.js

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的生命周期

看一下渲染之后的页面效果是什么样的

Recat.js

GIF.gif

刚才的代码中我有用到state这个方法,这个解释就是说,recat把组件看成状态机getInitialState,设置默认值,setState()可以修改state的值,每次state的值发生改变的时候,都会重新渲染UI

Recat.js

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的值。

看一下刚才的代码渲染之后的页面效果

Recat.js

GIF.gif

5. 結論

我知道我寫的文章可能不是太好,可能存在許多的問題,當然也需要大家的指點,最後希望我寫的文章能給大家帶來幫助! ! !

以上是Recat.js的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板