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

前端之家收集整理的这篇文章主要介绍了《深入react技术栈》学习笔记(一)初入React世界前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

正文

一:react简介

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

二:JSX语法

JSX基本语法总结:

1.XML基本语法

标签可任意嵌套

  1. const List =()=>(
  2. <div>
  3. <Title>
  4. <ul>
  5. <li></li>
  6. <li></li>
  7. </ul>
  8. </Title>
  9. </div>
  10. );

注意事项总结:
(1)定义标签时,只允许被一个标签包裹
(2)标签一定要闭合

2.元素类型

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

  1. const App =()=>(
  2. <Nav>
  3. {/*节点注释*/}
  4. <Person
  5. /*
  6. 多行注释
  7. */
  8. user={firstName:'hello',lastName:'world'}
  9. >
  10. </Nav>
  11. );

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

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

  1. const Header = ()=>(
  2. <h3 title={title}>{childern}></h3>
  3. );
  4. //调用
  5. <Header title="hello,world">Hello,world</Header>

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

  1. <checkBox checked/>等价为<checkBox checked={true}/>
  2. //如果想设置成false,必须:
  3. <checkBox checked={false}/>

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

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

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

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

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

4.javaScript属性表达式
注意事项:
(1)属性值要用表达式,使用{}替换即可

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

(2)子组件也可以用作表达式

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

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

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

猜你在找的React相关文章