react

标签：function React return name react 组件 JSX

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1. 初识React

React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

React 组件是返回标签的 JavaScript 函数：

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

2. jsx

JSX(JavaScript XML)是js内定义的一套XML语法，可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议，有由浏览器解析，而JSX是由js解析。当然也可以通过构建工具先解析生成，如webpack（使用babel-loader），这样可以减少代码这行中js解析JSX的时间。

更加熟悉，语法跟HTML非常相似（90以上相似度）
更加语义化，允许自定义标签及组件。
更加直观，标签处理方式，更加可读。
抽象化，React的升级，不需要改动任何JSX代码。
关注点分离,模块化，JSX以干净且简洁的方式保证了组件中的标签与所有业务逻辑的互相分离。

2.1 使用注意事项

JSX必须严格闭合

//错误
<div>
    
//正确
<div/>（也行,看需求）
<div></div>

JSX标签可以当做一个变量，可以在任何位置使用和使用变量装起来
```
var div = <div>ddd</div>
ReactDOM.render(div);
```
JSX一个标签是一个组件，当存在两个组件在同一级，必须使用一个标签（组件）包起来

错误写法
```
<div></div>
<div></div>
```
正确写法
```
<span>
    <div></div>
    <div></div>
</span>
```

自定义组件使用首字母大写

首字母不大写直接解析为同名html标签

const test = <div></div>
<Test /> //自定义
<div></div> //直接解析为<div></div>
<test /> //直接解析为<test></test>,在浏览器是不识别的，无法显示

使用驼峰式命名法给所有大部分属性命名

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

2.2 JSX使用JavaScipt

2.2.1 变量

var name = "test";
<div>{name + "666"}</div>

2.2.2 大括号{}的使用

JSX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户。例如，这将显示 user.name：

return (
  <h1>
    {user.name}
  </h1>
);

你还可以将 JSX 属性 “转义到 JavaScript”，但你必须使用大括号而非引号

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

你也可以把更为复杂的表达式放入 JSX 的大括号内(字符串拼接，循环。。。):

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

2.2.3 函数

var names = ['Alice', 'Emily', 'Kate'];
<div>
    { 
        names.map(function (name) { 
            return <div>Hello, {name}!</div>
        }) 
    }
</div>

2.2.4 条件渲染

使用 if

<div className={if(isComplete){ 'is-complete' }}></div>

使用三目运算符

<div className={this.state.isComplete ? 'is-complete' : ''}></div>

使用&&运算符

<div className={state.isComplete && 'is-complete'}></div>

2.2.5 渲染列表

这里给出一个由数组生成一系列列表项的简单示例：

首先，把数据存储到数组中：

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

遍历 products 这个数组中的每一项，并获得一个新的 JSX 节点数组 listItems：

const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>

把 listItems 用 <ul> 包裹起来，然后返回它：

return <ul>{listItems}</ul>;

<li> 有一个 key 属性。对于列表中的每一个元素，你应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。这样做可以提高性能。

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>

2.3 样式

2.3.1 class样式

在 React 中，你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：

<img className="avatar" />

然后，你可以在一个单独的 CSS 文件中为它编写 CSS 规则：

/* In your CSS */
.avatar {
  border-radius: 50%;
}

2.3.2 style样式

<img
  className="avatar"
  style={{
    width: user.imageSize,
    height: user.imageSize
  }}
/>

2.4 组件

2.4.1 介绍

react的组件通常是一个函数或者是一个类返回的是一段特殊html代码

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

2.4.2 使用

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

2.4.3 props

Props 是你传递给 JSX 标签的信息。例如，className、src、alt、width 和 height 便是一些可以传递给 <img> 的 props

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

2.4.4 组件传值

父传子

Profile 的子组件是 Avatar

// 给Avatar组件的person传值（传了一个对象）{ name: 'Lin Lanying', imageId: '1bX5QH6' }
// 给size（传了一个数字） 100
export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

子组件读取 props

function Avatar(props) {
  const { person, size } = props
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

标签：function,React,return,name,react,组件,JSX
From： https://www.cnblogs.com/yangyucai/p/17346815.html