写在前面
因为鄙人技术栈主要是vue的前端开发，所以一直没有更新除vue技术栈之外的一些文章，但是我虽然是写vue的，同时我也是一名前端开发啊，作为一名合格的前端开发怎么可以允许自己不去了解一下react呢，毕竟用户体量那么大的框架，再加上我也着实很久没有更新了，趁着这次的正常更新回归，我们就从react开始吧！！！
知识点代码展示
代码基础框架
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React演示-ClearLove</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!-- 下面例子中代码实现的位置 -->
</body>
</html>
JSX
<div id="app"></div>
<script>
let hello = React.createElement('h1', {
className: 'div_red'
}, 'Hello World')
ReactDOM.render(hello, document.getElementById('app'))
</script>
<!-- jsx 语法 在js中写html的语法 也可以在html中写js的语法 -->
<div id="app1"></div>
<script type="text/babel">
let domName = 'clearlove'
let template = <h1 className='div_red'>Hello {
domName}</h1>
ReactDOM.render(template,document.getElementById('app1'))
</script>
函数式（无状态）组件创建
<!-- 函数式组件声明 -->
<div id="app"></div>
<script type="text/babel">
function Hello(){
let template = <h1>Hello World</h1>
return template
}
ReactDOM.render(<Hello/>,document.getElementById('app'))
</script>
继承式（有状态）组件创建
<!-- 有状态组件创建 使用Class的方式进行继承React.Component -->
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
render(){
return <h1>Hello World</h1>
}
}
ReactDOM.render(<Hello/>,document.getElementById('app'))
</script>
函数式（无状态）组件传值
<!-- 函数式组件传值 只需要在组件上进行定义对应的属性 在组件中直接获取即可 -->
<div id="app"></div>
<script type="text/babel">
function Hello(props){
let template = <h1>Hello {
props.tName}</h1>
return template
}
ReactDOM.render(<Hello tName="clearlove"/>,document.getElementById('app'))
</script>
继承式（有状态）组件传值
<!-- 有状态组件创建 使用Class的方式进行继承React.Component 传值的时候需要进行this.props.属性 -->
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
render(){
return <h1>Hello {
this.props.cName}</h1>
}
}
ReactDOM.render(<Hello cName="clearlove"/>,document.getElementById('app'))
</script>
组件事件处理
<!-- 有状态组件创建 使用Class的方式进行继承React.Component -->
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor(){
super()
// 这里需要注意的是 this的使用是不可以在super之前的
this.state = {
cName:'clearlove'
}
}
// 更新数据的函数 这里用箭头函数进行声明就不用处理this指向的问题
updateInfo = ()=>{
this.setState({
cName : 'wlm'
})
}
// 如果不用箭头函数进行声明的时候 这里的this指向是需要手动更新的
updateInfoNotByJ() {
this.setState({
cName : 'lll'
})
}
render(){
return <div>
<h1>Hello {
this.state.cName}</h1>
<button onClick={
this.updateInfo}>更新数据</button>
<button onClick={
this.updateInfoNotByJ.bind(this)}>再次更新数据(这里直接进行更改this指向)</button>
<button onClick={
()=> this.updateInfoNotByJ()}>再再次更新数据(别忘记添加小括号)</button>
</div>
}
}
ReactDOM.render(<Hello/>,document.getElementById('app'))
</script>
组件列表渲染
<!-- 列表渲染的时候可以使用for或者一些js循环的方式进行，这里没有vue中的类似v-for的一些指令可以用 -->
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
state = {
list : ['one','two','three']
}
render(){
const {
list} = this.state
const lists = []
// 这里需要进行添加对应的key 用法是个vue中的用处基本上是一致的
list.map((item,index)=>{
lists.push(<li key={
index}>{
item}</li>)
})
return <div>
<ul>
{
lists}
</ul>
</div>
}
}
ReactDOM.render(<Hello/>,document.getElementById('app'))
</script>
组件条件判断
<!-- 条件渲染的时候也是需要进行js处理的，因为当前的react是没有v-if的写法的 -->
<div id="app"></div>
<script type="text/babel">
function Right(){
return <h1>RIGHT</h1>
}
function Error(){
return <h1>ERROR</h1>
}
class Hello extends React.Component{
state = {
isRight : false
}
// 更改当前state中变量状态的函数
updateState = ()=>{
this.setState({
isRight : !this.state.isRight
})
}
render(){
const {
isRight} = this.state
return <div>
{
isRight ? <Right/> : <Error/>}
<button onClick={
this.updateState}>更改状态</button>
</div>
}
}
ReactDOM.render(<Hello/>,document.getElementById('app'))
</script>
注意点
- 有无状态的组件的使用场景是不同的，如果你的功能相对比较单一，数据操作并不多的情况下，我们默认是使用无状态组件的，所谓的无状态组件就是没有对应的生命周期函数，也没有对应的state的声明，我们使用的时候是比较简单暴力的，直接props.属性即可
- 上面的例子都是一些很基础的例子，但是工作中写一般也都是这么实现的，基础功能的实现只要注意相应的点即可
- 如果你觉得看起来比较费力的话，那有可能是我这边写的不够详细，另一种可能就是可能你对除react之外的一些框架也不是很了解，所以接受起来会相对难一点，相信但凡写过类似框架的，上面的例子都是一些很基础的例子
写在最后
react给我的感觉是他的写法开始不太容易接受，特别是写vue习惯的人，因为他的一些写法让我觉得怪，特别是jsx的时候，但是当我尝试写一些组件的时候，进行组件之间传值的时候发现他其实是比vue还要更加方便的，当然这些都是一些很简单和基础的用法，后面的父子之间的函数调用和hooks等用法只能后面进行更新，感谢阅读！！！