参考视频:李立超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;
注意事项
-
最好不要直接修改旧的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对象
- 创建一个存储DOM对象的容器 --使用useRef()
- 将容器设置为想要获取DOM对象元素的ref属性
const App = ()=>{
const ref1 = useRef();
return <div ref = {ref1}>hhh</div>
}
export default App;