React (一) 基础入门用法

什么是 JSX

JSX 的全名是 javascript and XML，是一种可拓展的标记性语言。主要特点是声明式和组件化。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

说明: JSX 是 react 中一项技术，不是全新的语言，js 的扩展

JSX 的具体用法

JSX 最主要的就是组件化，在 JSX 的语法主要提供了 2 中声明组件的方式分别是函数组件和类组件

函数组件

使用函数定义的方式来编写组件

// 函数组件
function App() {
    const divTitles = "我是react111";
    return (
        <div title={divTitles} className="App" tab-index="1">
            <h1>Hello world</h1>
        </div>
        <div>哈哈哈</div>
    );
}

类组件

使用 class 关键字来编写组件，使用类组件要继承 React 的 React.Component 方法

// 类组件
import React from 'react';
class App extends React.Component {
    render() {
        return(
            <div className="App">
                <h1>Hello world1</h1>
            </div>
        );
    }
}

基本语法

在 JSX 里面 {} 里面会被当成 js 在执行，但是不支持 js 语句，只支持表达式，也不支持对象的写法（在 style 里面可以写）， 属性要用小驼峰的形式写。

标签类型

dom 标签

div、p 等这个不做介绍

自定义标签

自定义标签就是组件，首字母必须大写用来和 Dom 标签做区分

// 定义一个函数组件和写内联样式
function Component1(){
    const divTitles = "我是react111";
    const divStyles = {
        color: 'red',
        fontSize: '26px'
    };
    const porps = {name: 'ccc',age:18};

    function handClick() {
        console.log('我是吴彦祖');
    };
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <h1>Hello world Component1</h1>
            <button onClick={handClick}>我是按钮</button>
            <User  {...porps} />
        </div>
    );
}

// 使用 Component1
function App() {
    const divTitles = "我是react111";
    return (
        <div>
            <Component1 />
        </div>
    );
}

内联样式

可以使用对象的方式来写

// 定义一个函数组件和写内联样式
function App(){
    const divTitles = "我是react111";
    const divStyles = {
        color: 'red',
        fontSize: '26px'
    };
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <h1>Hello world</h1>
        </div>
    );
}

标签属性

标签属性使用小驼峰去写属性名

// 标签属性
function App(){
    const divTitles = "我是react111";
    return (
        <div title={divTitles} className="App" tabIndex="1">
            <h1>Hello world</h1>
        </div>
    );
}

注释

不同于 js 代码中的// 、/**/注释，在 JSX 中大括号包裹的注释

class App extends React.Component {
    render() {
        return(
            <div className="App">
                {/* <h1>Hello world1</h1> */}
            </div>
        );
    }
}

拓展运算符的运用

可以使用 posps

function Component1(){
    const porps = {name: 'ccc',age:18};
    return (
        <div className="App" tab-index="1">
            <h1>Hello world Component1</h1>
            <User  {...porps} />
        </div>
    );
}

// props 的使用
function User(props){
    return(
        <div>
            <h2>我是user组件</h2>
            <p>{props.name}---{props.age}</p>
        </div>

    );
}

组件上的事件

也是要使用小驼峰的写法

function Component1(){
    const porps = {name: 'ccc',age:18};
    function handClick() {
        console.log('我是吴彦祖');
    };
    return (
        <div className="App" tab-index="1">
            <h1>Hello world Component1</h1>
            <button onClick={handClick}>我是按钮</button>
        </div>
    );
}

只有一个顶层的 Dom

// 只能有一个顶层 Dom
function App() {
    const divTitles = "我是react111";
    return (
        <div title={divTitles} className="App" tab-index="1">
            <h1>Hello world</h1>
        </div>
        <div></div> // 报错
    );
}

可以使用占位符来使用 Fragment 不会报错

// 可以使用占位符来使用 Fragment 不会报错
import React, {Fragment} from 'react';
function App() {
    const divTitles = "我是react111";
    return (
        <Fragment>
            <div title={divTitles} className="App" tab-index="1">
                <h1>Hello world</h1>
            </div>
            <div>哈哈哈</div>
        </Fragment>
    );
}

或者空标签 <></> 包裹，就可以在顶层写多个 Dom

function App() {
    const divTitles = "我是react111";
    return (
        <> 
            <div title={divTitles} className="App" tab-index="1">
                <h1>Hello world</h1>
            </div>
            <div>哈哈哈</div>
        </>
    );
}

JSX 原理

React.createElement

主要使用了 React.createElement 创建 Dom

这个是使用 JSX 写的函数组件

function App() {
    const divTitles = "我是react111";
    return (
            <div title={divTitles} className="App" tab-index="1">
                <h1>Hello world</h1>
            </div>
    );
}

使用 React.createElement

// 使用 React.createElement 创建 dom
function App() {
    const divTitles = "我是吴彦祖";
    const element = React.createElement(
        "div",
        {title: divTitles,className: 'app', tabIndex: 1},
        React.createElement(
            "h2",
            null,
            "hello world"
        )
    );
    return element;
}

参考链接

React官网