recherche

Maison >interface Web >js tutoriel >Recat.js

Recat.js

PHPz
PHPzoriginal
2017-04-04 10:14:272259parcourir

0. Avant-propos

« Comme le temps passe à toute vitesse, je ne me soucie que de vous. » Je n'ai pas mis à jour l'article ces jours-ci. ne soyez pas offensé, haha! Récemment, l'entreprise travaille sur le projet recat.js Cependant, je ne le connais pas très bien, je suis également novice et j'apprends toujours. Cependant, si vous avez de bons documents d'apprentissage, vous pouvez le faire. je peux me les confier. Merci à tous.

Recat.js

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

1 Introduction

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur.

2. Caractéristiques

  1. Conception déclarative −React adopte un paradigme déclaratif, qui peut facilement décrire les applications.

  2. Efficient −React minimise l'interaction avec le DOM en simulant le DOM.

  3. Flexible −React fonctionne bien avec des bibliothèques ou des frameworks connus.

  4. JSX - JSX est une extension de la syntaxe JavaScript. JSX n'est pas requis pour le développement de React, mais il est recommandé.

  5. Composant - La création de composants via React facilite la réutilisation du code et peut être bien appliquée dans le développement de grands projets.

  6. Flux de données de réponse unidirectionnelle - React implémente un flux de données de réponse unidirectionnelle, réduisant ainsi le code en double, c'est pourquoi il est meilleur que la liaison de données traditionnelle Plus simple .

3. Points clés

Avant de parler du code, je voudrais dire quelques points supplémentaires :

  1. Plusieurs fichiers doivent être importés, et l'ordre ne peut pas être modifié

    Recat.js

    Paste_Image.png

  2. Développement basé sur les composants, Tout est un composant, ce qui y est inclus pour créer un composant, les accessoirespass value, bindevent, etc.

  3. plug-in, la chose la plus importante C'est recat-router, routage

Implémentation du code

1. quelques fichiers sous le titre 

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

  • script type babel

  • ne peut contenir qu'un seul nœud.

  • Le composant doit être fermé

  • Vous pouvez utiliser la syntaxe es6 ou la syntaxe es5

3 . Il existe un conteneur en HTML
 <p id="demo"></p>
4. code 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>

En plus des balises HTML p natives que nous avons écrites, nous pouvons personnaliser les balises dans recat, ce qui est le cas. ne représente pas un vrai nœud DOM , du point de vue de recat, n'est qu'une instance des composants recat. Alors, comment ces composants recat apparaissent-ils sur la page ? Le premier paramètre est ce que nous voulons rendre. recat Components, le deuxième paramètre Components est l'élément conteneur à la position à insérer après le rendu. En résumé, le résultat du rendu hello est inséré dans le conteneur d'éléments avec l'ID demo.

Ensuite, jetons un œil au résultat du rendu

Recat.js

Paste_Image.png

Ensuite, jetons un œil au résultat du rendu Structure de la page

Recat.js

Paste_Image.png


Voyons maintenant si tout ce que j'ai dit a été reflété, et pour le p nommé data-recatroot, nous ne semblons pas avoir nommé cet attribut C'est quelque chose que recat fait en interne pour vous, car je suis aussi un débutant et je ne le comprends pas très bien. tu le sais, tu peux me le dire.

Comment ajouter des styles, vous pouvez également les ajouter comme ceci.

5. Code de structure HTML

Oui, vous l'aurez deviné, c'est toujours ce code de structure, un simple conteneur

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

Je sais que l'article que j'ai écrit n'est peut-être pas très bon et qu'il peut y avoir de nombreux problèmes. Bien sûr, j'ai aussi besoin de vos conseils. Enfin, j'espère que l'article que j'ai écrit. peut aider tout le monde ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Compréhension personnelle détaillée du modèle d'abonné de publication jsArticle suivant：Compréhension personnelle détaillée du modèle d'abonné de publication js

Articles Liés

Voir plus