React（2） --React基础

参考视频：李立超b站react教程

一、jsx

1.基本用法

//命令式编程
const button = React.createElement("button",{
    
    },"我是按钮");
//声明式编程
//在React中可以通过jsx来创建React元素
//若要使用jsx，必须使用babel完成jsx的翻译
const button = <button>我是按钮</button>;

2.注意事项

• jsx不是字符串，不要加引号

• jsx中html标签应该小写开头，React组件应该大写开头

• jsx中有且只有一个根标签

• jsx的标签必须正确结束

• jsx中可以使用**{}嵌入表达式**

• 如果表达式是空值，布尔值，undefined，将不会显示

• jsx中，属性可以直接在标签中设置

  • class需要使用className
  • style需要使用对象设置，样式名要使用驼峰命名

  const text = "我是按钮";
  const button = <button className = "btn" style = {
        
        {
        
        fontSize:23px}}>{
        
        text}</button>;
  

二、列表的渲染

const arr = [1,2,3];
//将arr渲染为一个列表
//jsx会自动将数组中的元素在页面中显示
<ul>
    {
    
    arr.map((item,index)=>{
    
    
        //开发中一般用数据的id作为key，不要用索引作为key
        return <li key = {
    
    index}=>{
    
    item}</li>;
    })}
</ul>

三、虚拟Dom

• React操作的是React元素，React元素和原生Dom元素具有映射关系
• 虚拟Dom的好处：
  • 降低Api的复杂度
  • 解决兼容问题
  • 提升性能（减少Dom的不必要操作）

四、组件

1.函数式组件

• 返回jsx
• 首字母必须大写

//App.js
const App = ()=>{
    
    
    return <div>hhh</div>
}
export default App;

//index.js
import App from "./App"
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<App/>);

2.类组件

• 必须继承React.Component
• 必须写一个render方法，方法返回值是jsx

//App.js
class App extends React.Component{
    
    
    render(){
    
    
        return  <div>hhh</div>
    }
}

//index.js
import App from "./App"
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<App/>);

五、props

通俗来说就是组件的参数

• 函数组件中，属性就是函数的参数

//App.js
const App = (props)=>{
    
    
    return <div>{
    
    props.test}</div>
}
export default App;

//index.js
import App from "./App"
const root = ReactDom.createRoot(document.getElementById('root'));
{
    
    /*在子组件中设置属性*/}
root.render(<App test = "123"/>);

六、state

• state只属于当前组件，其他组件无法访问
• state发生变化后，相关组件会重新渲染
• 在函数式组件中，需要通过钩子函数获取state
  • useState函数会返回一个数组
  • 第一个元素是初始值，只用来显示数据，直接修改不会触发组件的重新渲染
  • 第二个元素是一个函数，通常会命名为setXxx，调用其修改state后会触发组件的重新渲染

import {
    
    useState} from "react";
const x,setX = ...useState(0);
setX(x+1);
const App = ()=>{
    
    
    return <div>{
    
    x}</div>
}
export default App;

注意事项

扫描二维码关注公众号，回复： 14641939 查看本文章

• 最好不要直接修改旧的state

  • 若state是一个对象，仅仅修改对象里的值，React会认为对象并未发生改变

  • 可以用浅复制创建一个新对象

    const newState = Object.assign({
            
            },state);
    newState.xx = yy;//修改新创建的对象
    setState(newState);
    
    //更简便的写法
    setState({
            
            ...state,xx:yy});
    

• setState不会修改当前state

• setState的重新渲染是异步的，所以当调用setState需要使用state的值的时候可能会出现丢失修改的问题

  • 可以通过为setState传递回调函数的形式来修改state

  • 回调函数的返回值会成为新的state

  • 回调函数执行时，React会将最新的state值作为参数传递

    setState((preState)=>{
            
            return preState+1});
    

七、ref

用于获取原生的dom对象

1. 创建一个存储DOM对象的容器 --使用useRef()
2. 将容器设置为想要获取DOM对象元素的ref属性

const App = ()=>{
    
    
    const ref1 = useRef();
    return <div ref = {
    
    ref1}>hhh</div>
}
export default App;