2021-08-12—React学习笔记JSX与react组件

JSX的基本使用：React的核心内容

• createElement()繁琐不简洁；不直观，无法一眼看出描述的结构；不优雅 JSX是Javascript

• XML的简写，表示在Javascript代码中写XML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提高了开发效率。

使用JSX语法创建react元素

const title = <h1>Hello World!</h1>
ReactDOM.render(title,document.getElementById("root"))

为什么脚手架中可以使用JSX语法？
我们创建的前端项目会用到大都会用到vue或reac这些前端框架，这些项目在运行是需要构建的，因为像es6，less和sass，模板语法，vue指令和jsx语法是无法在浏览器中直接执行的，需要构建这样的一个操作来保证项目运行，webpack就是这样一个构建的工具。
webpack是一个打包模块化JavaScript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过 Plugin 注入钩子，最后输出多个模块组合成的文件。webpack专注于构建模块化的项目。
Babel的babel-preset-react包可以转换React框架的JSX语法。
安装：npm i react react-dom @babel/preset-react -D
配置：.babelrc文件的presets添加react的babel-preset-react包的配置"@babel/preset-react"
在create-react-app脚手架中已经默认该配置，无需手动配置。

JSX使用注意点：

• React元素的属性名采用驼峰命名法
• 特殊属性名：class->className、for→htmlFor、tabindex→tabIndex
• 没有子节点的react元素可用/>结束。（仅限JSX语法）
• 推荐：使用小括号包裹JSX，从何避免JS中的自动插入分号陷阱。

JSX中使用JavaScript表达式

• 数据存储在JS中
• 语法：{Javascript表达式}–单大括号
  JSX条件渲染
• 条件渲染：根据条件渲染特定的JSX结构，要不要显示某一块内容
• 使用if-else ,三元运算符或逻辑运算符来实现

const isLoading = true
const loadData = () => {
  if (isLoading) {
    return <div>加载中...</div>
  }
  return <div>加载完成</div>
}
const loadData = () => {
  return isLoading ? (<div>加载中...</div>) : (<div>加载完成</div>)
}

JSX列表渲染

• 如果要渲染一组数据，使用数组的map()方法
• 注意：渲染列表时应该添加key属性，key 属性的值要保持唯一
• 原则：map()遍历谁，key属性就添加给谁。
• 尽量避免使用索引号作为key

const songs = [
  {id : 1, name : 'HTML'},
  {id : 2, name : 'CSS'},
  {id : 3, name : 'javaScript'}
]

const list = (
  <ul>
    { songs.map(item => <li key = {item.id}>{ item.name }</li>)}
  </ul>
)

JSX样式处理
1、行内样式——style
2、类名——className（推荐）

总结

• JSX是react的核心内容。
• JSX表示在JS代码中写HTML结构，是React声明式的体现。
• 使用JSX配合嵌入式的JS表达式、条件渲染、列表渲染、可以描述任意UI结构。
• 推荐使用className的方式给JSX添加样式。
• React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能。（相比与vue框架）
  React组件
  组件表示页面中的部分功能
  组合多个组件实现完整的页面功能
  特点：可复用，独立，可组合
  组件两种创建方式
  使用函数创建组件
• 函数组件：使用JS的函数（或箭头函数）创建的组件
• 约定一：函数名称必须大写字母开头，React根据此区分组件和普通的React元素
• 约定二：函数组件必须要有返回值，表示该组件的结构
• 如果返回值为null，表示不渲染任何内容
• 使用函数名当作组件标签名

function Hello(){
    function handleClick(e){
        alert("请确认")
        //阻止浏览器默认行为
        e.preventDefault();
    }
    return(
        <div>
            <div>Hello，我是一个函数组件</div>
            <button onClick = {handleClick}>点击</button>
            <a href = 'http://www.baidu.com' onClick = {handleClick}>百度</a>
        </div>    
    )
}
// const Hello =  ()=>{
//     return(
//         <div>Hello，我是一个组件</div>
//     )
// }
export default Hello

使用类创建组件

• 类组件：使用ES6中的class创建的组件
• 约定一：类名称以大写字母开头
• 约定二：类组件继承React.Component父类，从而可以使用父类中提供的方法或属性
• 约定三：类组件必须提供render()方法
• 约定四：render()方法必须要有返回值，表示该组件的结构

import react from 'react'
import reactDom from 'react-dom'

class Tree extends react.Component{
    //事件处理程序
    handleClick=()=>{
        alert('事件已经触发！！')
    }
    // constructor(){
    //     super()
    //     //初始化state
    //     this.state = {
    //         count:0
    //     }
    // }
    //简化
    state = {
        count:10
    }

    render(){
        return (
            <div>
                <div>这是我的第一个类组件</div>
                <button onClick= {this.handleClick}>点我触发</button>
                <h1>计数器：{this.state.count}</h1>
                <button onClick = {()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                }}>增加</button>
            </div>    
        )
    }
}

export default Tree

React事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法：on+时间名称 = （事件处理程序），比如onClick={()=>{}}
• 注意：React事件采用驼峰命名法，比如onMouseEnter,onFocus

React事件对象

• 可以通过事件处理程序的参数获取到事件对象
• React中的事件对象叫做合成事件（对象）
• 合成事件：兼容所有浏览器，无需担心浏览器兼容问题
  有状态组件与无状态组件
  函数组件又称为无状态组件，类组件又称为有状态组件
  状态（state）即应用程序中的数据
  函数组件没有自己的状态，只负责数据展示（静），页面不需要和用户交互。
  类组件有自己的状态，负责更新UI，让数据动起来，用户需要和页面交互。
  state基本使用
  状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
  state值是对象，表示一个组件中可以有多个数据
  获取状态：this.state

setState()修改状态
数据驱动视图
状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState()作用：1、修改state 2、更新UI。