React的初认识

Posted ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React的初认识相关的知识，希望对你有一定的参考价值。

文章目录

React

中文官网: https://reactjs.bootcss.com/

英文官网: https://reactjs.org/

概念

React是一个用于构建用户界面的javascript库.

特性

  • 渐进式框架

  • 声明式编程

  • 单向数据流: 数据通过props从父组件传递到子组件,如果父组件的某个props的值发生改变时,react会重新渲染所有的子节点

命令式编程和声明式编程

命令式编程是 告诉计算机怎么做,是告诉过程

声明式编程是 告诉计算机要做什么,是告诉结果的.

基本使用React

基于浏览器的模式

  1. React.js 提供 核心代码，如：虚拟 dom，组件

    引入: <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

    React.createElement(type,props,children);

    type 标签的类型(如 div,ul,li等等)

    props 标签的属性(如 class,id等等)

    children 标签自身的子元素

    <!-- 02_利用react创建视图 -->
ReactDOM.render(
	React.createElement('h1',null,'我是一个标题'),
    document.querySelector('#root'),
    ()=>
        console.log('渲染成功');
    
);

    <!-- 02_利用react创建视图 -->
let h1 = React.createElement('h1',null,'我是一个标题');
let p = React.createElement('p',null,'我是一个段落标签');
let el = React.createElement(
	'header',
	id:'header',
	h1,
	p
);

ReactDOM.render(
	el,
	document.querySelector('#root'),
	()=>
        console.log('渲染成功');
	
);

  2. ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染

    引入: <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    ReactDOM.render(element, container[, callback])

    element：要渲染的内容(必选参数)

    container：要渲染的内容存放容器(必选参数)

    callback：渲染后的回调函数 (可选参数)

    <div id="root"></div>

    <!-- 01_react基本使用 -->
ReactDOM.render(
	"易烊千玺",
	document.querySelector('#root'),
	()=>
        console.log('渲染成功');
	
);

JSX

JSX是基于 JavaScript + XML 的一个扩展语法.

引入:<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 03_JSX -->
<script type="text/babel">
	ReactDOM.render(
		<header>
			<h1>hello react</h1>
			<p>利用JSX来渲染</p>
		</header>,
		document.querySelector('#root'),
		()=>
        	console.log('渲染成功');
		
	);
</script>

插值表达式

使用 一个花括号就可以显示出来值 表达式

注意: 在JSX中不支持语句写法(if语句, for循环, while)

输出数据类型

  • 字符串,数字原样输出;

  • 布尔值,空,未定义直接不输出

// let data = 'yyqx'; //原样输出
// let data = 1; //原样输出
// let data = false; //不输出
// let data = undefined; //不输出
// let data = null; //不输出

列表渲染

  • 数组 去掉逗号原样输出
  • 对象直接报错,可以单独找他的某个属性来让他输出
// let data = ['1','2','3']; //去掉逗号,原样输出
let data = 
	name:'张三',
	age:18
; //报错(可以单独找它的某个属性来让他输出)

条件渲染

  • 三元运算符 — ? 类似 if...else语句
  • 与或运算符 — || 类似 if(!) 取反; && 类似 if()
<h1> true ? '成立' : '不成立' </h1> //成立
<p> true || '利用JSX来渲染' </p> //不输出
<div> true && '正确' </div> //正确

列表循环

    //第一种写法
	// let data = ['内容1','内容2','内容3'];

    // function toData()
    //   let arr = [];

    //   data.forEach((item)=>
    //     arr.push(<li>item</li>)
    //   )

    //   return arr
    // 

    // ReactDOM.render(
    //   <header>
    //     toData()
    //   </header>,
    //   document.querySelector('#root'),
    //   ()=>
    //     console.log('渲染成功');
    //   
    // );

    // ----------------------------------------------
    // 第二种写法
	let data = ['内容1','内容2','内容3'];

    ReactDOM.render(
      <header>
        
          data.map((item)=>
            return <li>item</li>
          )
        
      </header>,
      document.querySelector('#root'),
      ()=>
        console.log('渲染成功');
      
    );

注释

/*注释*/

/*
  			多行注释
*/

JSX的注意事项

JSX: 基于 JavaScript 和 XML 的扩展语法

​ 它可以作为值使用

​ 它并不是字符串

​ 它也不是html

​ 它可以配合 js表达式 一起使用

​ 它不可以和 JS语句 一起使用

​ 所有的标签名必须是小写

​ 所有的标签必须闭合,哪怕是单标签

​ class 要写成className(现在class和className都可以的)

<div>
	<div className='box'></div>  
</div>

​ style 接受的是一个对象,并不是字符串

// <div>
//   <div class='box' style= width:'400px',height:'400px' ></div>  
// </div>,
// ------------------------------------------
<div>
	<div class='box' style=style></div>  
</div>,

​ 每次只能输出一个标签(或者说必须有一个容器)

​ 唯一父级/唯一容器

let Fragment = React;

<Fragment>
	<div class='box' style=style></div>
	<p>我是一个段落标签</p>
</Fragment>,

基于自动化的集成环境模式 create-react-app-脚手架

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

查看版本号

npx --version

创建项目

  1. create-react-app <项目名称>

  2. 或者npx方式

    npx create-react-app <项目名称>

项目目录结构说明

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

命令脚本

create-react-app — 同时也提供了其它一些命令来帮助我们进行开发

npm start — 启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

npm run test — 运行 Jest 测试

npm run build — 打包应用（准备上线）

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

类式组件

16.7版本之前有的

  1. 组件类必须继承 React.Component

  2. 组件类必须有 render 方法

  3. render 方法的 return 后定义组件的内容

import React,Component from 'react';

class App extends Component 
  render()
    return (<div>你好</div>)
  


export default App;

案例:

<!-- app.js -->
import React,Component from 'react';
import FriendList from "./FriendList";
class App extends Component 

  render()
    return (<div>
      <FriendList/>
    </div>)
  


export default App;

<!-- FriendList.js -->
import React,Component from 'react';
import "./FriendList.css";

export default class FriendList extends Component 

  render ()
    return (
      <div className="friend-list">
        <div className="friend-group">
            <dt>家人</dt>
            <dd>爸爸</dd>
            <dd>妈妈</dd>
        </div>
        <div className="friend-group">
            <dt>朋友</dt>
            <dd>张三</dd>
            <dd>李四</dd>
            <dd>王五</dd>
        </div>
        <div className="friend-group">
            <dt>客户</dt>
            <dd>阿里</dd>
            <dd>腾讯</dd>
            <dd>头条</dd>
        </div>
      </div>
    )
  



/* FriendList.css */
.friend-list 
  border: 1px solid #000000;
  width: 200px;

.friend-group dt 
  padding: 10px;
  background-color: rgb(64, 158, 255);
  font-weight: bold;

.friend-group dd 
  padding: 10px;
  /* display: none; */

.friend-group.expanded dd 
  display: block;

.friend-group dd.checked 
  background: green;
组件复用 - 数据抽取
<!-- data.js -->
let datas = 
  family: 
      title: '家人',
      list: [
          name: '爸爸',
          name: '妈妈'
      ]
  ,
  friend: 
      title: '朋友',
      list: [
          name: '张三',
          name: '李四',
          name: '王五'
      ]
  ,
  customer: 
      title: '客户',
      list: [
          name: '阿里',
          name: '腾讯',
          name: '头条'
      ]
  
;

export default datas;

<!-- FriendList.js -->
import React,Component from 'react';
import "./FriendList.css";
import data from "./data";
import Dl from "./dl";

export default class FriendList extends Component 

  render ()
    return (
      <div className="friend-list">
        
          Object.keys(data).map((item,index)=>
            return (
              <Dl 
                key = index
                name = item
                value = data[item]
              />
            )
          )
        
      </div>
    )
  


<!-- dl.js -->
import React, Component  from "react";

export default class Dl extends Component

  render()
    console.log(this.props);
    let title,list = this.props.value;
    return (
      <div className="friend-group">
        <dt>title </dt>
        
          list.map((item,index)=>
            return <dd key=index >item.name</dd>
          )
        
      </div>
    )
props和state
  • props 父组件传递过来的参数
  • state 组件自身状态
    • setState
    • 多个 setState 合并
props 与 state 的区别

state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state;
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改.

state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

React中的事件

  • this问题 — 事件中没有this,是undefined

    解决方式: 把事件中的函数改为箭头函数

  • 大小写问题

总结

  1. React是一个用于构建用户界面的JavaScript库.
  2. 特性是一个渐进式框架
  3. JSX是基于 JavaScript + XML 的一个扩展语法.
  4. 类式组件和函数组件

以上是关于React的初认识的主要内容，如果未能解决你的问题，请参考以下文章

React的初认识

TypeScript的初认识

TypeScript的初认识

TypeScript的初认识

python:关于函数的初认识

php面向对象的初认识