React 学习笔记 day 1

简介

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

特点

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

库引入

  1. 引入react核心库:react.development.js
  2. 引入react-dom扩展库(用于支持react操作DOM):react-dom.development.js
  3. 引入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>
  1. 虚拟DOM本质是Object类型的对象(一般对象)。
  2. 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
  3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上。

jsx语法规则

  1. 定义虚拟DOM时,不要写引号。
  2. 标签中混入了JS表达式时要用{}。
  3. 样式的类名指定不要用class,要用className。
  4. 内联样式,要用style={{key:value}}的形式去写。
  5. 只有一个根标签。
  6. 标签必须闭合。
  7. 标签首字母:(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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cancri e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值