React学习的记录

最新推荐文章于 2024-08-19 13:48:41 发布

Saucey_6

最新推荐文章于 2024-08-19 13:48:41 发布

阅读量280

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_39083004/article/details/77920222

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

从假期就开始了react的学习，今天记录一下react学习状况。
react 是什么，react能干什么，react有什么好处，react又有哪些坑呢。

react是什么？
React是一个JavaScript的UI库，简单来说是MVC中的V。
react特点
** 轻量级的一个库
** 组件化
** 速度快
** 单项数据流
** 跨浏览器兼容
react是谁提出的，为什么提出react
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站，在2013年开源。
react的安装
在Ubuntu下直接使用命令安装
npm init ;
npm install react react-dom；

Hello world

<head>
    <meta charset="UTF-8">
    <title>hello world</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="root"></div>
<script type="text/babel">

    ReactDOM.render(
            <h1>hello world</h1>,
        document.getElementById("root")
    )

</script>
</body>
</html>

运行结果
这里写图片描述

从代码中可以看出想在html文件中运行React，需要引入react.js、react-dom.js和browser.min.js这三个文件，浏览器器才能识别React，其次就是script标签的类型应为text/babel,因为React的JSX语法（下面会介绍到），与JavaScript不兼容。

JSX语法

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

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

Rendering element渲染元素

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

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

组件，props，state

组件

组件使得界面成为独立的，可以重复使用。它好像JS中的函数，他接收任意的输入（props）,且返回渲染页面的元素。
定义组件方法：JS函数，ES6Class定义。
组件核心内容：props和state.

props

props是组件的属性，由外部通过JSX属性设置，一旦设置完成，就认为他是不可修改的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</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="root"></div>
<script type="text/babel">

    function Hello(props) {
        return <h1>Hello,{props.name}</h1>
    }

    ReactDOM.render(
            <Hello name="React"/>,
        document.getElementById('root')
    );


</script>
</body>
</html>

运行结果：呈现Hello,React(就不截图了)。

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

如果把上面那段代码改写成这样，浏览器就会报错：提示未知类型错误：不能修改只读对象属性name的值

State

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</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="root"></div>
<script type="text/babel">

    class Button extends React.Component {
        constructor(props) {
            super(props);
            this.state = {liked: false};
            this.headleClick = this.headleClick.bind(this);
        }

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

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

        }
    }
    ReactDOM.render(
            <Button/>,
        document.getElementById('root')
    );


</script>
</body>
</html>

两次点击会出现不同的结果。

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