这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

学习笔记

React的学习

认识React

React最初作为Facebook开发Instagram的开发工具，在开源之后，顺利成为流行框架之一，应用广泛，前景可观，是很多大公司的首选。

JSX语法

JSX基本简介

JSX是JavaScript语言的扩展，被React用来替代常规使用的Javascript。JSX是在JavaScript内部来实现的。
JSX有着以下优点：
1.在编译时会为Javascript代码进行优化，会使执行速度更快。 2.类型安全的，在编译时就能发现错误，避免下一步的进行。 3.使用JSX编写模板，让开发更加简单快速，效率会更高。

使用JSX语法来创建React元素：

const title = <h1>Hello, world!</h1>;

使用ReactDOM。render()方法来将元素渲染到页面当中

ReactDOM.render(title,root)

注意点：
1.React元素的属性名使用驼峰式命名法
2.没有子节点的 React 元素可以用 /> 结束
3.推荐使用小括号来包裹JSX，避免JS当中自动插入分号

JSX中使用嵌入表达式

const name = 'hello'
  
const element = (
    <div>
        Hello, {name}!
    </div>
);

使用的是一个{}。
里面可以是JavaScript的任意表达式，比如函数。
不能在{}当中出现语句(比如：对象/JS语句)

JSX中条件渲染

1.使用三元表达式

const flag = 0
const content = (
        <div>
            {
                flag ? '成功' : '不成功'
             }
         </div>
                )

2.使用逻辑与和逻辑或

const  bool = true
const content = (
            <div>
                  {
                    bool && '正确'
                  }
             </div>
                    )

3.使用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中</div> 
  } else {
    return <div>数据加载完成</div>
  }
}
const content = <div>
                    {
                loadData(true)
                        }
                </div>

4.使用map方法
数组的map()方法可以渲染一组数据，渲染时要添加key属性，key属性的值要保证唯一。
尽量避免使用索引号来作为key

const people = [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'},
    {id: 3, name: '王五'},
]

const list = (
  <ul>
    {people.map((item) => (
      <li key={item.id}>
        <h3>姓名：{item.name}</h3>
      </li>
    ))}
  </ul>
)
 
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

前端学习06|青训营笔记