React的初认识

Posted 2021-08-28 ZZZ --- jh

tags:

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

React

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

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

概念

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

特性

渐进式框架
声明式编程
单向数据流: 数据通过props从父组件传递到子组件,如果父组件的某个props的值发生改变时,react会重新渲染所有的子节点

命令式编程和声明式编程

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

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

基本使用React

基于浏览器的模式

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('渲染成功');
	}
);

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>
```
```

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

创建项目

```
create-react-app <项目名称>
```
或者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版本之前有的

组件类必须继承 React.Component
组件类必须有 render 方法
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

解决方式: 把事件中的函数改为箭头函数
大小写问题

总结

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

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

React的初认识

文章目录

React

概念

特性

命令式编程和声明式编程

基本使用React

基于浏览器的模式

JSX

插值表达式

输出数据类型

列表渲染

条件渲染

列表循环

注释

JSX的注意事项

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

安装

查看版本号

创建项目

项目目录结构说明

命令脚本

组件

类式组件

组件复用 - 数据抽取

props和state

props 与 state 的区别

React中的事件

总结