React

最新推荐文章于 2024-06-20 11:37:20 发布

Y2730415540

最新推荐文章于 2024-06-20 11:37:20 发布

阅读量114

点赞数

文章标签： react

本文链接：https://blog.youkuaiyun.com/Y2730415540/article/details/110758315

版权

什么是React？
React 是一个用于构建用户界面的 JavaScript 库
如何使用 React
基于浏览器模式
（一）引入react.js : react.js提供react的核心功能代码如：虚拟dom 组件
React.createElement(type,props,children);

type ：类型（也就是标签）
props：属性（id、class、style…）
chidren: 可以写标签也可以写内容

//第一种方法
		<script>
        ReactDOM.render(
            React.createElement("h1",null,"我是一个标签"),
            document.querySelector("#root"),
            //回调函数 如有需求可以往里面写  没有的话可以删除
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>


//第二种方法
        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("渲染成功")
            }
        )

（二）引入react-dom.js: react-dom.js提供了与浏览器交互的DOM功能如：dom 渲染
ReactDOM.render(element, container[, callback])

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

<div id="root"></div>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script>
        /*
            React.js 提供 核心代码
            ReactDOM 提供了与浏览器交互的DOM功能， 如 虚拟DOM
        
        */
        ReactDOM.render(
            "今天天气不错",
            document.querySelector("#root"),
            //回调函数 如有需求可以往里面写  没有的话可以删除
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

JSX
JSX: 基于javaScript 和 Xml 的扩展语法
在JSX使用之前需要在文件内引入babel.js 并且将script中的type改为啊"text/babel" 然后才能将数据渲染到页面中

<script src="./js/babel.js"></script>

<script type="text/babel">
    /*
        JSX:  基于javaScript 和 Xml 的扩展语法
    */
    ReactDOM.render(
        <header>
            <h1>hello react</h1>
            <p>利用JSX来渲染</p>     
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )
</script>

插值表达式
各种类型内容在插值中的使用

注释 {/注释/} {/* 多行注释 */}

输出数据类型

字符串、数字：原样输出
布尔值、空、未定义 会被忽略

列表渲染

数组
对象 扩展：虚拟 DOM （virtualDOM） 和 diff

在这里插入图片描述

条件渲染

	三元运算符

//条件输出

ReactDOM.render(
    <header>
        <h1>{true?"成立":"不成立"}</h1>
        <p>利用JSX来渲染</p>     
    </header>,
    document.querySelector("#root"),
    //回调函数 如有需求可以往里面写  没有的话可以删除
    () => {
        console.log("渲染成功")
    }
)

与或运算符
// ? : 类似于 if…else
// || 类似于 if(!) 取反
// && 类似于 if()

列表循环
let data = [
        "内容1",
        "内容2",
        "内容3",
        "内容4"
    ]
//第一种方法
    function toData() {
        let arr = []
        data.forEach(item => {
            arr.push(<li>{item}</li>)
        })
        return arr
    }

    ReactDOM.render(
        <header>
            {toData()}
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )

//第二种方法
    ReactDOM.render(
        <header>
            <ul>
                {
                    data.map(item => {
                        return <li>{item}</li>
                    })
                }
            </ul>
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )

JSX注意事项：

它可以作为值使用
它并不是字符串
它也不是html
它可以配合JS 表达式一起使用
它不可以和JS 语句一起使用
所有的标签名必须是小写
所有的标签必须闭合，哪怕是单标签
class 要写做 className - style 接收的是一个对象，并不是字符串
每次只能输出一个标签(或者说必须要有一个容器)
唯一父级/唯一容器
也可以换成Fragment，可以不在页面显示

let style = {
        width:'200px',
        height:'200px',
        background:'red'
    }
ReactDOM.render(
        // <div>
        //    <div className="box" style={{width:"400px",height:"300px"}				}></div>
        // </div>,
        <div>
            <div className="box" style={style}></div>
        </div>,
        document.querySelector("#main"),
    )

基于自动化的集成环境模式 - create-react-app - 脚手架
介绍
Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

安装与使用
通过 npm、yarn、npx 都可以
安装
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安装完成以后，即可使用 create-react-app 命令
create-react-app <项目名称>
组件
对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。
函数式组件
函数的名称就是组件的名称
函数的返回值就是组件要渲染的内容
类式组件
组件类必须继承 React.Component
组件类必须有 render 方法
render 方法的 return 后，定义组件的内容

ps：都要记得导出