React基础-JSX和react组件常用API

JSX 插值语法

为什么使用JSX？

React 认为渲染逻辑本质与其他UI逻辑内在耦合，比如，在UI中需要绑定处理时间、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。

React 不强制要求使用JSX，但是大多数人发现，在JavaScript代码中奖JSX和UI放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告信息。

使用JSX

JSX表达式可以是一个简单的DOM元素对象：

const element = <h1>这是一个DOM元素</h1>

也可以插入JavaScript表达式

可以插入注释
可以插入JS表达式

JS表达式：运算后会返回一个值的代码组合。比如，变量、运算式、函数调用

let inner = "这是被插值表达式插入的内容";
let count = 100;

let element = <header className="header div" id="header">
    	<h1>React</h1>
        <div>{inner}</div>
        <div>{count + 1}</div>
    </header>

不同数据类型在插值中的表现

基础类型

number、string：保持原样进行输出
boolean、null、undefined、Symbol：输出时会忽略掉

复合类型

object：①如果是react element对象，则正常输出；②普通对象则不能作为内容进行输出

注意事项

JSX 不是字符串
JSX 是一个值，所以 JSX 中，必须有一个顶层（唯一）的父级将JSX包裹起来

如果父级我们并不希望在DOM中展示出来，可以使用Fragment组件或者空标签<></>
JSX 区分大小写，标签要全部小写，组件的首字母要大写。
JSX 标签必须闭合。
JSX 不是HTML，很多属性在编写时是不一样的。
- className
- style
列表渲染时，必须有 key 值

列表输出

列表循环本质上就是JavaScript中的for循环，常用于处理数组或者对象数据上，可以用列表循环减少很多重复性的代码编写。

let data = {
  a:{
    inner: "列表项1"
  },
  b: {
    inner:"列表项2"
  },
  c: {
    inner:"列表项3"
  }
}

Object.keys(data).map(item=>console.log(data[item]))
let ul = <ul>{Object.keys(data).map(item=><li>{data[item].inner}</li>)}</ul>;

条件输出

通过运算表达式或者函数来进行条件判断，并控制DOM的渲染或者某些状态或者属性的加载。常用的判断语句有：||、&&、? : 和function

let is = false;
let is2 = true;
let is3 = false;
let is4 = (nub)=>{
  if(nub < 5){
    return <strong>小于5</strong>
  }
  if(nub < 10){
    return <strong>小于10</strong>
  }
  if(nub < 15){
    return <strong>小于15</strong>
  }
  if(nub < 20){
    return <strong>小于20</strong>
  }
  return <strong>大于等于20</strong>
}
let div = <div>
  <div>{is||<strong>条件不成立时输出</strong>}</div>
  <div>{is2&&<strong>条件成立时输出</strong>}</div>
  <div>{is3?<strong>条件成立时输出</strong>:<strong>条件不成立时输出</strong>}</div>
  <div>{is4(20)}</div>
</div>

组件和状态

React 组件分为两种，一种是类组件，一种是函数组件，在 React 16.7 之前，函数组件只能依赖父级组件进行更新。

类组件：

类组件必须继承自 Component 类。
组件名首字母必须大写。
类组件中必须有一个 render 方法，而且该方法必须有返回值，返回的是当前组件要构建的视图。
在组件中，有一个 state 属性，该属性中保存的是组件可变的数据，当 state 更新时，会引起组件更新，从而驱动视图更新（数据驱动思想）。

事件：

React 中添加事件类似于 JavaScript 的行间事件。
事件名是驼峰命名。
注意事件处理函数的 this 是指向 undefined 的。

将 this 指向组件实例的方式有两种：
- 通过箭头语法
- 通过 .bind 修饰符

更新组件状态

在组件中要更新状态，需要调用实例的setState方法
setState 本身接收一个参数是该对象的数据，该对象中，是要写入更新后的state。

class App extends Component { // 类组件必须继承自Component类
  state={ // state 属性用来保存该组件的课可变数据
    data: {
      count:1
    }
  }
  handler=()=>{ // 通过箭头语法将this指向该组件
    const {nextCount} = this.state.data; // 声明需要改变的数据
    this.setState({ // 传入需要改变的数据
      data: {
        count: nextCount + 1 // 对数据进行需要的处理
      }
    });
  }
  render(){
    const {count} = this.state.data; // 从 state 里面拿数据需要重新声明一个新变量
    return <div>
      <p>当前数字{count}</p>
      <button onClick={this.handler}>递增</button>
    </div>
  }
}
export default App;

初始化React

ReactElment React.createElement(type,props,...children) 构建视图，返回值是一个用来描述视图的虚拟DOM

type 节点类型
props 属性 object
children 内容或子节点

ReactDOM.render(inner, container[, callback]) 将构建好的视图添加到真实DOM中

element 要渲染的内容
container 要渲染的内容存放容器
callback 渲染后的回调函数

let header = React.createElement("header", {
    className: "header div",
    id: "header"
  }, "hear");

  let element = (<h1>hello</h1>)
  //渲染到真实DOM视图
  ReactDOM.render(
    element,
    document.querySelector("#root"), 
    () => {
      console.log("构建完成")
    }
  );

实例

以数据驱动的思维，实现点击列表，显示下拉栏的功能。先看一下静态页面，显示和因此下拉栏通过css属性进行控制*display*: none/block，如图。 React基础-JSX和react组件常用API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div class="friend-list">
        <dl class="friend-group expanded">
            <dt>家人</dt>
            <dd>爸爸</dd>
            <dd>妈妈</dd>
        </dl>
        <dl class="friend-group">
            <dt>朋友</dt>
            <dd>张三</dd>
            <dd>李四</dd>
            <dd>王五</dd>
        </dl>
        <dl class="friend-group">
            <dt>客户</dt>
            <dd>阿里</dd>
            <dd>腾讯</dd>
            <dd>头条</dd>
        </dl>
    </div>
</body>
</html>

dl {
    margin: 0;
}
.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;
}

通过react的实现思路：

数据结构性很强，可以通过结构化的存储数据，并通过列表输出
点击表头的时候，触发事件，事件的回调函数触发 setState 方法，通过修改数据的属性，驱动视图更新
视图通过判断数据的属性，来给className进行判断，从而进行条件输出

index.js 项目入口

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <App />,
  document.querySelector("#root")
);

data.js 存储所有数据的数据池

let rootdata = {
  "家人":["爸爸","妈妈"],
  "朋友":["张三","李四","王五"],
  "客户":["阿里","腾讯","头条"]
}; 

export default rootdata;

App.js 组件，唯一的父级组件，负责对data进行处理，通过数组循环将每组的值传递给实例化好的<Dd/>组件

import { Component } from "react";
import rootdata from "./data";
import Dd from "./dd";

class App extends Component {
  render() {
    return <div className="friend-list">
    {Object.keys(rootdata).map((item,index)=>{ 
        return <Dd key={index} title={item} data={rootdata[item]} />
    })}
</div>
  }
}
export default App;

dd.js 子组件，用来渲染每个列表里面的视图，并处理点击事件和回调函数触发条件输出

import { Component } from "react";

class Dd extends Component{
    state = { show: false };
    changeShow = () => {
        const {show} = this.state;
        this.setState({
            show:!show
        })
    };
    render(){
        const { title, data } = this.props;
        const { show } = this.state;
        return (
        <dl className={show?"friend-group expanded":"friend-group"}>
            <dt onClick={this.changeShow}> {title} </dt>
            {data.map((item,index)=> <dd key={index}> {item} </dd>)}
            //react特性：js表达式也可以渲染成UI
        </dl>
        )
    }
};

export default Dd;

最终实现的效果如下图： React基础-JSX和react组件常用API

React基础-JSX和react组件常用API

JSX 插值语法

为什么使用JSX？

使用JSX

不同数据类型在插值中的表现

注意事项

列表输出

条件输出

组件和状态

初始化React

实例

常见问题FAQ

掘金(普通上班族) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

JSX 插值语法

为什么使用JSX？

使用JSX

不同数据类型在插值中的表现

注意事项

列表输出

条件输出

组件和状态

初始化React

实例

常见问题FAQ

掘金(普通上班族) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式