React入门笔记（一）

OpenDigg 发布于2019-08-19 18:15 / 3392人阅读

摘要：环境配置新版的要求统一使用作为的编译工具，因此我们选择，新建文件，内容如下设置候选版本为和这里因为要用到，所以把在候选版本里加入对的支持组件里引入的组件这个概念里的组件就像，里的控件一样，能方便快捷的作为界面的一部分实现一定功能，我们可以

环境配置

新版的React要求统一使用babel作为JSX的编译工具，因此我们选择babel，新建.babelrc文件，内容如下

{
    "presets":["es2015","react"]       //设置候选版本为es6和react-jsx
}

这里因为要用到ES6，所以把在babel候选版本里加入对ES6的支持

React组件

React里引入的组件这个概念：
React里的组件就像Android，ios里的控件一样，能方便快捷的作为界面的一部分实现一定功能，我们可以把数据传入：

var Hello = React.createClass({
    render: function () {
        return (
            
                
                    {this.props.name}
                
            
        );
    }
});

这里我们用React.createClass方法创建了一个React组件，render函数的返回值为要渲染的内容。

同样的组件我们用ES6实现如下：

class Hello extends React.Component {

    render() {
        return (
            
                
                    {this.props.name}
                
            
        );
    }

}

这里用到了ES6的class、extends等关键词

接下来我们用ReactDOM.render方法将其render到页面上

let names = [
    "flypie ",
    "flyboy "
];

ReactDOM.render(
    ,
    document.body
);

组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

下图是官方文档里对各种函数执行位置的表述

这里我们做个实验：

let Hello = React.createClass({

    getInitialState: function () {
        console.log("getInitialState");
        return {};
    },

    getDefaultProps: function () {
        console.log("getDefaultProps");
        return {};
    },

    componentWillMount: function () {
        console.log("componentWillMount");
    },

    componentDidMount: function () {
        console.log("componentDidMount");
    },

    componentWillReceiveProps: function () {
        console.log("componentWillReceiveProps");
    },

    shouldComponentUpdate: function () {
        console.log("shouldComponentUpdate");
        return true;
    },

    componentWillUpdate:function(){
        console.log("componentWillUpdate");
    },

    componentDidUpdate:function(){
        console.log("componentDidUpdate");
    },

    componentWillUnmount:function(){
        console.log("componentWillUnmount");
    },

    render: function () {
        return (
            
                
                    {this.props.name}
                
            
        );
    }
});

let names = [
    "flypie ",
    "flyboy "
];

ReactDOM.render(
    ,
    document.body
);

运行程序，控制台输出结果如下：

GPU云服务器云服务器 java开发入门笔记学习笔记一 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79371.html

React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0
Flux架构小白入门笔记

摘要：架构小白入门笔记是提出的一种处理前端数据的架构，学习就是学习它的思想。这个笔记是我在学习了阮一峰老师的架构入门教程之后得出，里面的例子和部分原文来自于其不同在于我用将其改写了，并加入了注释。 Flux架构小白入门笔记 Flux是facebook提出的一种处理前端数据的架构，学习Flux就是学习它的思想。这个笔记是我在学习了阮一峰老师的Flux 架构入门教程之后得出，里面的例子和部分原...

lily_wang 2019-08-22 10:45 评论0 收藏0
react入门笔记

摘要：是程序的入口文件自动化测试定义组件扩大点击区域虚拟的生成数据模板数据模板生成虚拟虚拟就是一个对象，用它来描述真实损耗了性能用虚拟的结构生成真实的来显示发生变化数据模板生成新的虚拟极大提升了性能数据更新比较原始虚拟和新的虚拟的区别找到区别极大 Index.js是程序的入口文件 PWA progressive web application(registerServiceWorker) A...

Hanks10100 2019-08-26 12:23 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0