《深切react手艺栈》进修笔记（一）初入React天下

2024年2月23日 185次阅读 来源: specialCoder

媒介

以《深切进修react手艺栈》为线索，纪录下进修React的主要学问内容。本系列文章没有涵盖悉数的react学问内容，只是纪录下了进修之路上的主要学问点，一方面是本身的总结，同时拿出来和在进修react的人们一块分享，共同进步。

正文

一：react简介

网上能搜出来一大片，想要相识的自行谷歌，我们照样直奔进修的主题。

二：JSX语法

JSX基础语法总结：

1.XML基础语法

标签可恣意嵌套

const List =()=>(
<div>
    <Title>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </Title>
</div>
);

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

2.元素范例

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

const App =()=>(
<Nav>
{/*节点解释*/}
<Person
/*
多行解释
*/
user={firstName:'hello',lastName:'world'}
>
</Nav>
);

(3)DOCTYPE是没有闭合的，我们没法衬着它。罕见的做法是：组织一个保留HTML的变量，将DOCTYPE与全部HTML标签衬着后的效果串连起来

3.元素属性
注意事项：
（1）在JSX中从DOM属性到JSX中的属性，有两个破例的转换:
class属性改成className
for属性改成htmlFor
（2）组件的属性是完整自定义的属性，也能够理解为完成组件所须要的参数

const Header = ()=>(
<h3 title={title}>{childern}></h3>
);
//挪用：
<Header title="hello,world">Hello,world</Header>

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

<checkbox checked/>等价为<checkbox checked={true}/>
//假如想设置成false,必需:
<checkbox checked={false}/>

(4)睁开属性:假如你不知道要设置哪些 props,那末如今最好不要设置它。由于React不能帮你你搜检属性范例(propTypes)。如许纵然组建的属性范例有毛病，也不能获得清楚地毛病提醒。

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

<div data-attr="xxx"/></div>

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

<x-my-component custom-attr="foo"/>

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

const person = <Person name={window.isLoggedIn ? window.name : ""}>;

（2）子组件也能够用作表达式

const person = <Person name={window.isLoggedIn ? <Nav/> : <Login>};

5.HTML转义
注意事项：
（1）HTML会将一切要显现到DOmain的字符串转义，防备XSS
（2）React供应了dangerouslySetInnerHTML属性防止React转义字符

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

    原文作者：specialCoder
    原文地址: https://segmentfault.com/a/1190000008574780
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞