React基础 & JSX

介绍

React是前端的开发框架 允许我们用js的代码写html的页面

react不仅可以写web页面还可以写手机app应用和pc端的软件

使用JSX语法

JSX

React使用JSX，是js语法的扩展,在js的内部实现

可以任意的在jsx中使用JS的表达式

jsx中的表达式要包含在大括号中
推荐在 JSX 代码的外面扩上一个小括号，这样可以防止分号自动插入的bug.

function formatUserName(user) {
    return user.firstName+" 帅哥 "+user.lastName
} 

const user = {
    firstName: "li",
    lastName: "yuyuan"
}

//括号内即为jsx代码
const element = (
    <h1> 
        //jsx代码中的js代码加上{}
        hello,{formatUserName(user)}
    </h1>
)
//将元素渲染到对应 dom上 第一个参数为reactDOM元素 第二个元素为要渲染的节点
ReactDOM.render(element, document.getElementById("root"))

在编译之后,jsx会被转化为普通的javascript对象,所以我们可以随时使用jsx

jsx的实现

babel转义器会把JSX转换为名为React.createElement()方法来调用,返回一个react元素的对象

创建为一个React元素，这个元素即我们在屏幕上能看到的东西，React通过读取这些对象来构建DOM并且并保持内容一致

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

转换为

//React.createElement()方法
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

//返回一个React元素的对象

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

注意:
因为JSX编译后会转为React.creatElement函数,因此在使用之前必须导入并声明React变量，以及所使用的自定义组件

点语法

我们可以利用点语法，从一个模块中中导出其他组件

mport React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

组件命名

一般小写开头的组件是内置的，因此我们建议以大写开头来命名自定义组件

如果我们想用表达式作为组件名使用时，我们需要将表达式首先赋值给大写开头的变量,然后使用此变量作为组件名使用，而不能直接使用表达式作为组件名进行使用

function FancyBorder(props) {
    return(
        <div>
            <h1>
                {props.title}
            </h1>
        </div>
    )
}

const componentsName = {
    fancy: FancyBorder
}

class PublicFancyBorder extends React.Component {

    render() {
        //先赋值大写开头的变量名
        const ComponentBorder = componentsName[this.props.componentName]

        return (
            <ComponentBorder title="这是标题"></ComponentBorder>
        )
    }
}

export default PublicFancyBorder

组件属性传递

在jsx中字符串常量可以作为属性值传递

<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

如果不传值默认为true（不推荐这么做）

可以使用扩展运算符,将props对象全部传递

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;

}

//这两种写法等效

function App2() {

  const props = {firstName: 'Ben', lastName: 'Hector'};

  return <Greeting {...props} />;

}

在js中扩展运算符也可以扩展对象，我们可以利用这点将对象的属性和方法均作为props进行传递

JSX格式化html代码

JSX 会移除行空行和开始和结尾处的空格。标签邻近的新行也会被移除，字符串常量内部的换行会被压缩成一个空格

子代 && props.children

在jsx中，在组件的开始和结束标签，标记之间的内容都会作为特殊的参数进行传递:props.children

props.children可以用来传递任何数据，而不是我们常见的React元素或字符串

function Repeat(props) {
    let items = [];
    for (let i = 0; i < props.numTimes; i++) {
      items.push(props.children(i));
    }
    return <div>{1}</div>;
  }
  
  function ListOfTenThings() {
    return (
      <Repeat numTimes={10}>
        {(index) => <div key={index}>This is item {index} in the list</div>}
      </Repeat>
    );
  }

export default ListOfTenThings

此例中传递的props.children为函数

jsx中的boolean、Null、Undefined被忽略

false、null、undefined 和true都是有效的子代，但它们不会直接被渲染，如果想要出现在结果中，需要先进行转为字符串String( )