Recat.js-JS 튜토리얼-php.cn

0. 서문

“시간이 급하게 흘러가니 너한테만 관심이 생겼어.” 요즘 기사 업데이트를 많이 안 했네요. 화내지 마세요, 하하! 최근 회사에서 recat.js 프로젝트를 진행 중인데, 저도 아직 초보여서 잘 모르는 부분이 있는데, 좋은 학습자료가 있으면 부탁드립니다. 나한테 맡겨도 돼. 모두 고마워.

Recat.js

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

소개

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.

2. 특징

선언적 디자인 −React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.
효율성 -React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
유연성 −React는 알려진 라이브러리나
프레임워크와 잘 작동합니다.
JSX - JSX는 JavaScript 구문의 확장입니다. JSX는 React 개발에 필수는 아니지만 권장됩니다.
컴포넌트 - React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용할 수 있습니다.
단방향 응답 데이터 흐름 − React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄이므로 기존
데이터 바인딩보다 더 좋습니다. .

3. 핵심 사항

코드에 대해 이야기하기 전에 몇 가지 중요한 사항을 더 말씀드리고 싶습니다.

여러 파일을 가져와야 하며 순서는 변경할 수 없습니다.

Paste_Image.png
컴포넌트 기반 개발, 모든 것이 컴포넌트, 컴포넌트를 만들기 위해 무엇이 들어있는지, props
pass value, 바인딩event 등
플러그인, 가장 중요한 것은
라우팅

4. 코드 구현

먼저 소개합니다. 제목

<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 유형 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 구성 요소의 인스턴스일 뿐입니다. 그러면 이러한 recat 구성 요소는 recat에서 render() 메서드를 호출하는 것입니다. 매개변수는 렌더링하려는 recat 구성요소입니다. 두 번째 매개변수 구성요소는 렌더링 후 삽입할 위치의 컨테이너 요소입니다. 요약하면 hello의 렌더링 결과가 데모 ID로 요소 컨테이너에 삽입됩니다.

그럼 렌더링 결과를 살펴보겠습니다

Recat.js

Paste_Image.png

그럼 살펴보겠습니다. 렌더링 결과 페이지 구조

Recat.js

Paste_Image.png

이제 제가 말한 내용이 모두 반영되었는지 확인해 보겠습니다. data-recatroot의 경우 이
속성을 으로 명명하지 않은 것 같습니다. 이는 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