Recat.js

0. Vorwort

„Da die Zeit wie im Flug vergeht, bin ich in diesen Tagen nur noch wenig am aktualisiert. Ich hoffe, dass du gewonnen hast.“ Sei nicht beleidigt, haha! Vor kurzem arbeitet das Unternehmen am Projekt recat.js Ich bin jedoch auch ein Neuling und lerne noch Ich kann sie mir überlassen. Vielen Dank an alle.

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

1.

Einführung

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.

2. Funktionen

1. Deklaratives Design − React übernimmt ein deklaratives Paradigma, mit dem sich Anwendungen leicht beschreiben lassen.

2. Effizient − React minimiert die Interaktion mit dem DOM durch Simulation des DOM.

3. Flexibel − React funktioniert gut mit bekannten Bibliotheken oder

   Frameworks.

4. JSX − JSX ist eine Erweiterung der JavaScript-Syntax. JSX ist für die React-Entwicklung nicht erforderlich, wird aber empfohlen.

5. Component − Das Erstellen von Komponenten über React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.

6. Einseitiger Antwortdatenfluss – React implementiert einen unidirektionalen Antwortdatenfluss und reduziert dadurch doppelten Code, weshalb es besser als herkömmliche

   Datenbindung ist .

3. Wichtige Punkte

Bevor ich über den Code spreche, möchte ich noch ein paar wichtige Punkte sagen:

1. Es müssen mehrere Dateien importiert werden und die Reihenfolge kann nicht geändert werden

   
   

   
   

   Paste_Image.png

2. Komponentenbasierte Entwicklung, alles ist eine Komponente, was darin enthalten ist, um eine Komponente zu erstellen, Requisiten

   Wert übergeben, bindenEreignis usw.

3. Plug-in, das Wichtigste ist Recat-Router,

   Routing

4. Erste Einführung Einige Dateien unter dem Titel

2. Code

<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>

Skripttyp Babel

• können nur einen Knoten enthalten

• Die Komponente muss geschlossen sein

• Sie können es6-Syntax oder es5-Syntax verwenden

• 3 . Es gibt einen Container in HTML

4. Zusätzlich zu den nativen HTML-p-Tags, die wir geschrieben haben, können wir Tags in Recat anpassen Stellt keinen echten

DOM-Knoten

 <p id="demo"></p>

dar. Aus Sicht von Recat handelt es sich lediglich um eine Instanz von Recat-Komponenten. Wie werden diese Recat-Komponenten auf der Seite angezeigt? Der erste Parameter ist das, was wir rendern möchten, der zweite Parameter Components ist das Containerelement an der Position, die nach dem Rendern eingefügt werden soll. Zusammenfassend wird das Hallo-Rendering-Ergebnis in den Elementcontainer mit der ID demo eingefügt.

Dann werfen wir einen Blick auf die Rendering-Ergebnisse

 <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>

Paste_Image.png

Dann werfen wir einen Blick darauf bei dem, was wir nach der Seitenstruktur gerendert haben p für data-recatroot, wir scheinen dieses -Attribut
nicht benannt zu haben. Das ist etwas, was recat intern für Sie tut, weil ich auch ein Anfänger bin und es natürlich nicht ganz verstehe Du weißt es, du kannst es mir sagen.

So fügen Sie einige Stile hinzu: Sie können sie auch so hinzufügen.

5. HTML-Strukturcode

Ja, Sie haben es erraten, es ist immer noch dieser Strukturcode, ein einfacher Container

 <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. Fazit

Ich weiß, dass der Artikel, den ich geschrieben habe, möglicherweise nicht sehr gut ist und dass es natürlich auch viele Probleme geben kann kann jedem helfen! ! !

Das obige ist der detaillierte Inhalt vonRecat.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!