《深入react技术栈》学习笔记（一）初入React世界

verano 发布于2019-08-20 14:47 / 1669人阅读

摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。

前言

以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。

正文 一：react简介

网上能搜出来一大片，想要了解的自行谷歌，我们还是直奔学习的主题。

二：JSX语法

JSX基本语法总结：

1.XML基本语法

标签可任意嵌套

const List =()=>(

    
        <ul>
            <li></li>
            <li></li>
        </ul>
    

);

注意事项总结：
（1）定义标签时，只允许被一个标签包裹
（2）标签一定要闭合

2.元素类型

两种不同的元素：DOM元素和组件元素
注意事项（在JSX的对应原则）总结：
（1）HTML标签首字母为小写，组件元素首字母为大写
（2）JSX在一个在一个组件的子元素位置使用注释要用{}包裹起来

const App =()=>(

{/*节点注释*/}


);

(3)DOCTYPE是没有闭合的，我们无法渲染它。常见的做法是：构造一个保存HTML的变量，将DOCTYPE与整个HTML标签渲染后的结果串联起来

3.元素属性
注意事项：
（1）在JSX中从DOM属性到JSX中的属性，有两个例外的转换:
class属性改为className
for属性改为htmlFor
（2）组件的属性是完全自定义的属性，也可以理解为实现组件所需要的参数

const Header = ()=>(
{childern}>
);
//调用：
Hello,world

(3)Boolean属性：省略的默认的JSX设为 true。要传入false时，必须使用属性表达式。这常用于表单元素

等价为
//如果想设置成false,必须:

(4)展开属性:如果你不知道要设置哪些 props,那么现在最好不要设置它。因为React不能帮你你检查属性类型(propTypes)。这样即使组建的属性类型有错误，也不能得到清晰地错误提示。

（5）自定义HTML属性：在JSX中传入自定义属性，React是不会渲染的。如果要使用HTML自定义属性，要使用data-前缀（这与HTML标准是一致的）。

然而在自定义标签中，任意的属性都是支持的:

4.javaScript属性表达式
注意事项：
（1）属性值要用表达式，使用{}替换即可

const person = ;

（2）子组件也可以用作表达式

const person =  : };

5.HTML转义
注意事项：
（1）HTML会将所有要显示到DOmain的字符串转义，防止XSS
（2）React提供了dangerouslySetInnerHTML属性避免React转义字符

下一篇内容我们讲React组件，欢迎关注。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81918.html

《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
《深入react技术栈》学习笔记（三）漫谈React

摘要：前言接下来让我们进入新的章节漫谈。正文一事件系统的事件系统事件系统符合标准，不存在任何兼容性问题，并且与原生的浏览器事件一样有同样的接口。所有的事件都自动绑定到最外层。组织事件冒泡的行为只适用于合成系统中，且没办法阻止原生事件冒泡。前言接下来让我们进入新的章节：漫谈React。本篇文章主要讲React事件系统和表单操作。正文一：事件系统 1.react的事件系统react事件系...

isLishude 2019-08-21 11:38 评论0 收藏0
React学习之初入React世界

摘要：语法将语法直接加入到代码中，再通过翻译器装换到纯后由浏览器执行。事实上，并不需要花精力学习。可以说，基本语法基本被囊括了，但也有少许不同。明确的数据流动。这条原则让组件之间的关系变得简单且可预测。使用获取和显示回调。 JSX语法 JSX将HTML语法直接加入到JavaScript代码中，再通过翻译器装换到纯JavaScript后由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编...

cjie 2019-08-23 18:38 评论0 收藏0