React应用是由组件构成就是返回标记的JavaScript函数但是函数名必须是大写的委里方便其他组引用。export default function MyApp(){ return( h1相邻的JSX元素必须有一个父容器包裹/ h1 只能返回一个根元素返回多个会直接报错/h1 / ); }在React里面用className来指定CSS类也可以编写单独的CSS文件。使用{}来控制变量在写标签的时候也需要注意标签的闭合不管是单标签还是多标签都需要正确的闭合才不会报错。条件渲染JSX是JavaScript和HTML结合的模版语法可以直接将HTML和JavaScript混起来写。参考代码如下function App() { const flag true let divContent null if (flag) { divContent spanflag为true/span } else { divContent pflag为false/p } return ( div {divContent} /div / ); } export default App;在渲染展示数组中的数据时可以使用map或者循环来进行遍历但是要注意的是要给每个子项都指定一个key这个key要保证是唯一key可以保证在任意的情况下渲染的正确性。在任何情况下都只能返回一个根元素但空标签不能指定key这个时候可以使用React提供的Fragment来指定对应的key。import { Fragment } from react/jsx-runtime; function App(){ const list[ {id:1,name:小米}, {id:2,name:小白}, {id:3,name:小大} ] const listContentlist.map(item( Fragment key{item.id} li {item.name}/li p-----/p /Fragment )) return( ul {listContent} /ul / ); } export default App;事件操作在JSX中属性通常是按驼峰来命名的在事件里面可以接受一个参数e来获取事件的相关信息import { Fragment } from react/jsx-runtime; function App(){ function handleClick(e){ console.log(点击了函数,e) } return( button onClick{handleClick}按钮/button / ); } export default App;useState状态函数默认是没有状态的可以通过调用react的useState来实现状态的更改import { useState } from react; import { Fragment } from react/jsx-runtime; function App(){ const [content,setContent]useState(初始的内容); function handleClick(e){ console.log(点击了函数,e) setContent(新内容) } return( div{content}/div button onClick{handleClick}按钮/button / ); } export default App;通常在组件中只会存在两三个状态在状态中可以存数组、对象、字符串等等数据。但是对象是不能直接渲染需要通过.来获取对应的值。setData函数是直接替换掉对应的值不是修改。所以说如果想要替换对象中的某个值需要先复制再替换。如果值太多了可以使用展开运算符...来先复制所有的数据再进行替换操作如果是同名属性后面的会替换掉前面的属性。import { useState } from react; import { Fragment } from react/jsx-runtime; function App(){ const [data,setData]useState({ title:默认标题, content:默认内容 }); function handleClick(e){ console.log(点击了函数,e) setData({ ...data, title:新的内容 }) } return( div title{data.title}{data.content}/div button onClick{handleClick}按钮/button / ); } export default App;新属性一定要写在后面不然就会被原来的属性替换掉。数组形式的状态数组是有序的可以在数组里面进行添加删除和修改删除可以使用filter函数来过滤掉修改需要使用到map。filter实现删除 // 原始数组 const list [ { id: 1, name: 张三 }, { id: 2, name: 李四 }, { id: 3, name: 王五 } ]; // 删除 id2 的元素保留 id ! 2 的项 const newList list.filter(item item.id ! 2); console.log(newList); // [{id:1}, {id:3}] // 末尾追加 const addItem () { setList([...list, {id:3, name:王五}]) } // 头部追加 setList([{id:3, name:王五}, ...list]) 修改元素map // 修改 id2 的名字 const editItem () { setList(list.map(item { if(item.id 2){ return {...item, name:小李四} // 新对象 } return item; })) } 在指定位置插入元素 // 在 index 1 的位置插入新数据 // const insertItem () { const insertIndex 1 // 指定插入下标 const newItem { id: 99, name: 新来的 } setList([ ...list.slice(0, insertIndex), newItem, ...list.slice(insertIndex) ]) }
