作者：mobiledu2502902537 | 来源：互联网 | 2023-09-25 16:07
一、react是什么&＃xff1f;
react是一个用于构建用户界面的 Javascript 库
二、使用步骤
安装react
1. 安装脚手架
npm i create-react-app -g
2. 创建项目
create-react-app 项目名
3. 启动项目
npm start
二、元素渲染
文本渲染
const str &＃61; "你好react"
function App() {return ({str}
{3 - 1}
{str.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;)}
}
export default App;
运行结果&＃xff1a;
html渲染
import &＃39;./App.css&＃39;;const stl &＃61; {fontSize:&＃39;24px&＃39;,color:&＃39;red&＃39;
}
function App(){return ()
}
export default App;
运行结果&＃xff1a;
三、条件渲染
&& 与三目运算符
const str &＃61; &＃39;给我爱吃的喜之郎&＃39;;
const msg &＃61; &＃39;还是html简单&＃39;;
const score &＃61; 80;
let flag &＃61; true;
const list &＃61; [&＃39;react&＃39;,&＃39;vue&＃39;,&＃39;angular&＃39;,&＃39;jQuery&＃39;];
function App(){return (长大我想当太空人
爷爷奶奶可高兴了
{str}
{2&＃43;3}
{str.length}
{str.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;)}
条件渲染
条件渲染
{score>&＃61;60?&＃39;及格&＃39;:&＃39;再学一遍&＃39;}{flag&&
啊这
}
列表渲染
{list.map((item,index)&＃61;>
{item}
)}
}
export default App;
如果条件是 true &＃xff0c;&& 右侧的元素就会被渲染&＃xff0c;如果是 false&＃xff0c;React 会忽略并跳过它。
四、列表渲染
import &＃39;./App.css&＃39;;const arr &＃61; [我直接坐飞机去你的坟头
,疯狂的偷吃你的贡品
,啊对对对
]
const stl &＃61; {fontSize:&＃39;24px&＃39;,color:&＃39;red&＃39;
}
function App(){return ()
}
export default App;
运行结果&＃xff1a;
key 帮助 React 识别哪些元素改变了&＃xff0c;比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。
如果列表项目的顺序可能会变化&＃xff0c;不建议使用索引来用作 key 值&＃xff0c;因为这样做会导致性能变差&＃xff0c;还可能引起组件状态的问题。
五、事件渲染
React 事件与 js 事件一致 &＃xff0c;但是React 事件的命名采用 小驼峰式 &＃xff08;camelCase&＃xff09;
事件的四种语法&＃xff1a;
1、箭头函数 onClick&＃61;{()&＃61;>{ xx }}
function App() {return ()
}
export default App;
2、onClick&＃61;{函数名}
const say &＃61; function () {alert("秋天")
}
function App() {return ()
}
export default App;
3、onClick&＃61;{函数名.bind(this,参数)}
const say &＃61; function (str) {alert("秋天" &＃43; str)
}
function App() {return ()
}
export default App;
4、onClick&＃61;{()&＃61;>函数名(参数)}
const say &＃61; function (str) {alert("秋天" &＃43; str)
}
function App() {return ()
}
export default App;
六、react 响应式数据 State
import React,{Component}from &＃39;react&＃39;;
class App extends Component{constructor(props) {super(props);this.state&＃61;{num:1}}addNum(n){this.setState({num:this.state.num&＃43;n})}render(){return(函数类
);}
}
export default App;
京公网安备 11010802041100号