初学React

最新推荐文章于 2024-04-30 23:41:28 发布

Curry 3O

最新推荐文章于 2024-04-30 23:41:28 发布

阅读量143

点赞数

分类专栏： JSX React

本文链接：https://blog.csdn.net/qq_42552393/article/details/99828882

版权

React 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JSX

2 篇文章 0 订阅

订阅专栏

1.了解mvc模式与mvvm模式

mvc

后台主导开发的思想。这种思想一般应用在后端中的web层，m表示model数据模型，v表示view视图，c表示controller控制器。在 servlet、jsp 中主要应用的就是mvc思想。
在这里插入图片描述

mvvm

前后台分离开发中的前端思想。m表示model数据模型，v表示view视图，vm表示视图模型，负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。React、Vue、AngularJS中主要应用的就是mvvm思想。
在这里插入图片描述

2.React简介

认识 React

React是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点

声明式设计:React采用声明范式，可以轻松描述应用。
高效 :React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 :React可以与已知的库或框架很好地配合。
JSX :JSX 是JavaScript语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件:通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流:React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比
传统数据绑定更简单。

React生态圈

react 的生态体系比较庞大，它在web端，移动端，桌面端、服务器端，VR领域都有涉及。react可以说是目前为止最热门，生态最完善，应用范围最广的前端框架。react结合它的整个生态，它可以横跨web端，移动端，服务器端，乃至VR领域。

React安装

使用CDN
注意: 在浏览器中使用 Babel 来编译 JSX 效率是比较低的。如果在html中直接使用react需要导
入react、react-dom、babel。

<!-- 导入react -->
<script src="https://cdn.bootcss.com/react/16.6.0/umd/react.development.js"></script> 
<!-- 导入react-dom -->
<script src="https://cdn.bootcss.com/react-dom/16.6.0/umd/reactdom.development.js"></script> 
<!-- 导入babel -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

使用脚手架

安装node，并且node版本应该满足 Node >= 6 and npm >= 5.2
$ node -v
全局安装脚手架
$ cnpm install -g create-react-app
使用脚手架创建工程
$ create-react-app my-app
启动工程
$ cd my-app/
$ npm start

3.JSX

简介

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。JSX是javascript的语法糖。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

4.组件

组件定义

定义组件最简单的方式就是编写 JavaScript 函数，该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

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

组件调用

通过标签来调用已经定义好的组件。

5.渲染

基本渲染

将变量的值直接显示到页面中。在jsx中可以在大括号直接编写Js代码，如果是变量，则直接输出。

function Welcome(props) { 
	let msg = 'hello world'
	return <h1>{msg}</h1>;
}

列表渲染

可以通过使用 {} 在 JSX 内构建一个元素集合, key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

<ul className="list"> 
	{ 
		arr.map((item,index) => return <li key={index}>{item}</li>) 
	} 
</ul>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表渲染</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //列表渲染  循环渲染-for渲染
        let arr = ['苹果','葡萄','桃子'];
        function MyCom(props) {
            return(
                <div>
                    <ul>
                        {
                            //如果要在JSX中写JS代码要用{}
                            //如果要访问变量要用{}
                            props.arr.map((item,index)=>{
                                return <li key={index}>{item}</li>;
                            })
                        }
                    </ul>
                </div>
            );
        }

        //使用组件
        ReactDOM.render(<MyCom arr={arr}/>,document.getElementById('one'));
    </script>
</head>
<body>
    <div id="one"></div>
</body>
</html>

条件渲染

React中的条件渲染和JavaScript中的一样，使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据它们来更新UI。

function UserInfo(props){
	let {user} = props;
	if(user) {
		return ( <div>欢迎您 {user.name} 头像</div> );
	} 
	return ( <div><a href="#">亲，请登录</a></div> );
}
ReactDOM.render(<UserInfo user={{name:'zhangsan'}}/>,document.getElementById('app'));

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件渲染</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        function IsCom(props) {
            //使用解构获取属性
            let {show,user,temp} = props;
            if (show&&user) {
                return <h2>已登录</h2>;
            }
            return <div><h2>请登录</h2>{temp}---{Array.isArray(temp)+''}</div>;
        }
        let show = false;
        let user = {
            name:'tom'
        };
        ReactDOM.render(<IsCom show={show} user={user} temp={[1,2,3]}/>,document.getElementById('root'));
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

6.组件传值

props
调用组件的时候可以传递任何参数作为prop,如果传递字符串需要将字符串直接作为属性值进行传递，如果是要传递其他数据类型，需要将值放入到{}中进行传递。

传递字符串
<MyComponent foo='this is foo' />
传递数字
<MyComponent foo={1,2,3} /> // foo=3
传递布尔类型
<MyComponent foo={true} />
传递数组类型
<MyComponent foo={[1,2,3,4]} /> //foo=1234
传递对象
<MyComponent foo={{name: 'terry' }} />

7.Fragment

Fragments 允许将子列表分组，而无需向 DOM 添加额外节点。

class Table extends React.Component { 
	render() { 
	return (<table><tr><Columns /></tr></table>); 
	} 
}

如果Columns为如下代码则无效，因为在tr标签中不能插入div标签。

class Columns extends React.Component {
	render() { 
	return ( <div> <td>Hello</td> <td>World</td> </div> ); 
	} 
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件嵌套</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //表格组件(类组件)
        class MyTable extends React.Component{
            constructor(props){
                super(props);
                this.state = {};
            }
            render(){
                return(
                    <table>
                        <tbody>
                            <tr>
                                <MyTd />
                            </tr>
                        </tbody>
                    </table>
                );
            }
        }
        //表格的td组件
        class MyTd extends React.Component{
            constructor(props){
                super(props);
                this.state = {};
            }
            render(){
                return(
                    <React.Fragment>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </React.Fragment>
                );
            }
        }
        ReactDOM.render(<MyTable />,document.getElementById('root'));     
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Curry 3O

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学React

1.了解mvc模式与mvvm模式mvc后台主导开发的思想。这种思想一般应用在后端中的web层，m表示model数据模型，v表示view视图，c表示controller控制器。在 servlet、jsp 中主要应用的就是mvc思想。mvvm前后台分离开发中的前端思想。m表示model数据模型，v表示view视图，vm表示视图模型，负责把Model的数据同步到View显示出来，还负责把Vie...
复制链接

扫一扫

专栏目录