React小白进门

react.png

如今，前端框架Angular，React和Vue逐渐成熟起来，他们三个各显其色,下面我们就先来熟悉轻量级的React吧！！！

React

是什么 （What）

  • React是一个JavaScript的UI库，简单来说是MVC中的V

谁提出的，提出的原因（Why & Who）

  • React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站，在2013年开源。

特点（How）

  • 轻量级的一个库
  • 组件化
  • 速度快
  • 单向数据流

  • 跨浏览器兼容（支持IE8）


    know-react.png

简单的了解React背景后，接下来我们看看React的一些关键词

React的关键词

  • 安装
  • JSX语法
  • Rendering
  • 组件、props、state
  • 处理事件
  • 生命周期
  • 虚拟DOM

安装

  • 根据官网直接下载安装包
  • 使用包管理器（npm、yarn）安装react
    • npm init
    • npm install react react-dom
      或
    • yarn init
    • yarn add react react-dom

Hello world

安装完之后，运用React写个“Hello React”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello React</h1>,
        document.getElementById('example')
    );
</script>
</body>
</html>

运行结果：

result.png

从代码中可以看出想在html文件中运行React，需要引入react.js、react-dom.js和browser.min.js这三个文件，浏览器器才能识别React，其次就是script标签的类型应为text/babel,因为React的JSX语法（下面会介绍到），与JavaScript不兼容。
上面这个Hello React简单例子，就是React最基本的HTML模板，至于为什么这样写，浏览器就会出现这样的结果，不要着急，待我娓娓道来。

JSX语法

const element = <h1>Hello React</h1>;

上面这种写法既不是字符串赋值，也不是HTML标签。其被称为JSX语法，是JS的一种扩展。大部分情况下，在React中，我们用JSX来描述界面。JSX就像是一种模板语言，但它也包括JS的全部API。上面的HelloWrold例子中render方法中第一个参数就是用JSX语法写的一个表达式。

Rendering element 渲染元素

 ReactDOM.render(
        <h1>Hello React</h1>,
        document.getElementById('example')
    );

渲染元素就是用最基本的ReactDOM.render()方法进行渲染。就是将模板（<h1>Hello React</h1>）转换为HTML元素，插入到指定的DOM中去（插入到id为example元素中去）。

code-babel.png

从图片中可以看出，<h1>Hello React</h1>经过编译后，插入到id为example的div中去。

组件、props、state

组件使得界面分离成独立的，可重复使用的部件。概念上来讲，组件就像是JavaScript函数，他接收任意的输入(被称作props)，且返回渲染页面的元素。
定义组件的方法：JavaScript函数定义、ES6 Class定义
组件有两个核心的概念：props和state

1.props

props是组件的属性，由外部通过JSX属性设置，一旦初始设置完成，就可以认为props是不可修改的。关于props，官网有严格的规则：

All React components must act like pure functions with respect to their props.

所有的组件必须像纯函数一样对待他们的props。
什么是纯函数呢？纯函数就是相同的输入总是返回相同的输出的函数。这就意味着组件的props是不可修改的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    function Hello(props){
        return <h1>Hello,{props.name}</h1>
    }

    ReactDOM.render(
        <Hello name="React"/>,
        document.getElementById('example')
    );
</script>
</body>
</html>

运行结果：

result.png

由此可以看出，运行结果和上面例子的运行结果一样。这个例子是通过写JavaScript方法定义了一个组件，并且组件中添加了一个属性name,值为React。在Hello组件中可以通过props.name获取name属性的值。
上面提到React的props属性是不可修改的，当修改时则会报错。比如在Hello方法中进行修改

function Hello(props){
        props.name = "world";
        return <h1>Hello,{props.name}</h1>
    }

则浏览器就会报错


error.png

提示未知类型错误：不能修改只读对象属性name的值

2.State

state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state 呈现不同的 UI 展示。一旦状态（数据）更改，组件就会自动调用 render 重新渲染 UI，这个更改的动作会通过 this.setState 方法来触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = {liked: false};
            // This binding is necessary to make `this` work in the callback  
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.setState({liked: !this.state.liked});
        }

        render() {
            var text = this.state.liked ? "like" : "haven't liked";
            return (
                    <p onClick={this.handleClick}>You {text} this.click to toggle</p>
            )
        }
    }

    ReactDOM.render(
            <LikeButton></LikeButton>,
        document.getElementById('example')
    );
</script>
</body>
</html>

运行结果：

havnotliked.png

再次点击后
liked.png

从代码中看出初始化时，state.liked值为false,当点击<p>标签里的文本时，就会触发click事件，从而调用handleClick方法，在该方法中通过setState来修改state.liked的值。

处理事件

React元素处理事件和DOM元素处理是类似的，但有两点语法上的不同：

  • React事件命名遵守驼峰命名规则，而不是小写命名
  • 用JSX传递方法作为事件处理，而非字符串形式

生命周期

组件的生命周期分为三种状态：

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

React 提供了五种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用

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

虚拟DOM

React页面加载速度快，就是因为virtual DOM（虚拟DOM）的存在，不直接操作原生DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中当局部DOM发生变化，页面加载避免全部DOM的重新加载。

未完待续。。。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • React Quick Start笔记
    最近看了一本关于学习方法论的书，强调了记笔记和坚持的重要性。这几天也刚好在学习React，所以我打算每天坚持一篇R...
    gaoer1938阅读 1,736评论 0赞 5
  • React官方教程笔记（React 15.4.X）
    本笔记基于React官方文档，当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,812评论 14赞 128
  • React 高级指导 笔记
    深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,107评论 2赞 35
  • React 官方文档翻译二
    It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,317评论 0赞 2
  • React特性精华
    以下内容是我在学习和研究React时，对React的特性、重点和注意事项的提取、精练和总结，可以做为React特性...
    科研者阅读 8,297评论 2赞 21