React 学习笔记 day 1

最新推荐文章于 2024-06-14 12:42:02 发布

Cancri e

最新推荐文章于 2024-06-14 12:42:02 发布

阅读量111

点赞数

分类专栏：框架文章标签： react.js 学习

本文链接：https://blog.csdn.net/C__herry/article/details/127361473

版权

框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简介

React是一个将数据渲染为HTML视图的开源JavaScript库。

特点

采用组件化模式、声明式编码，提高开发效率及组件复用率。
在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

库引入

引入react核心库：react.development.js
引入react-dom扩展库（用于支持react操作DOM）：react-dom.development.js
引入babel库（用于将jsx转为js）：babel.min.js

注：react核心库必须在react-dom扩展库之前引入（即不能调换两者引入顺序）。

虚拟DOM的创建

<script type="text/babel" >
    const VDOM = (
        <h1 id="title" >
            <span>Hello, React</span>
        </h1>
    )
</script>

虚拟DOM本质是Object类型的对象（一般对象）。
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

jsx语法规则

定义虚拟DOM时，不要写引号。
标签中混入了JS表达式时要用{}。
样式的类名指定不要用class，要用className。
内联样式，要用style={{key:value}}的形式去写。
只有一个根标签。
标签必须闭合。
标签首字母：（1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错；（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

遍历输出数组元素

const data = ['Angular','React','Vue']
const VDOM = (
    <div>
        <h1>前端js框架列表</h1>
        <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
)
ReactDOM.render(VDOM,document.getElementById('test'))

组件

函数式组件

<div id="test"></div>

<script type="text/babel">
    function Demo(){
        return <h2>我是用函数定义的组件</h2>
    }
    ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

类式组件

<div id="test"></div>

<script type="text/babel">
    class Demo extends React.Component{
        render(){
            return <h2>我是用类定义的组件</h2>
        }
    }
    ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

学习视频地址：尚硅谷React教程（2022加更，B站超火react教程）_哔哩哔哩_bilibili