参考网站为:
https://zh-hans.react.dev/
网站内容和内置沙盒都很不错
我在会vue的基础上来对比react学习,个人理解如下:
相同点:
- 都有组件的概念,都是为了减少冗余代码;
- 标签引入值时候类似, 但是有些许差别,react在引用内容时候基本是两种方式
<MyWay className="color"></MyWay>
自定义的组件为了和react自带的做区分,首字母必须大写。此处用 “” 引用color<MyWay age={age}></MyWay>
用{}去引用值age- react和vue 一样都有props 的概念,通过该方式进行传参。react使用方式如下:
- 传属性名
function Content({name}){
return <p>我的名字是:{name}</p>
}
export default function Box(){
retutn (
<div>
<p>下面引用子组件</p>
<Content name="哈哈"></Content>
</div>
)
}
- 传整体组件
function Card({children}){
return <div>{children}</div>
}
export default function Box(){
retutn (
<Card>
<p>内容11</p>
<h2>我也在Card里面</h2>
</Card>
)
}
3.子传父
兄弟组件通信
import { useState } from 'react';
function Son(props){
const {call} = props
return (
<>
<p>I'm son</p>
<button onClick={() => call("爸爸,我没有钱了,速打钱200万!")}>打电话</button>
</>
)
}
function Dad({listen}){
function haveListen(){
alert(listen)
}
return (
<>
<p>I'm dad</p>
<button onClick={() => haveListen()}>接电话</button>
</>
)
}
function App(){
const [listen, setListen] = useState('')
function call(e){
alert("叮铃铃~~~~")
setListen(e)
}
return (
//幽灵节点<></>
<>
{/*实现son 给dad传参 -------兄弟组件通信*/}
<Son call={call}></Son>
<Dad listen={listen}></Dad>
</>
)
}
export default App
不同点:
- react 没有双向绑定的概念,目前理解的是通过state 去定义和修改值
import { useState } from 'react';
export default function Box(){
function handleClick(){
setName('棒棒糖')
}
const [name, setName] = useState('name的初始值')
retutn (
<button onClick={handleClick}>
点击name值为“棒棒糖”
</button>
)
}
覆盖原有属性(已经存在的是覆盖,不存在的是添加)
以上代码为手写,可能会有错误。
非受控表单组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/df5bbb09e88f4d228c464e86967e3b2b.png![在这里插入图片描述](https://img-blog.csdnimg.cn/60eb41c01819490cb9c9758ddf5d65f7.png
工具
生命周期
** 只有类组件有生命周期**
hooks 只能在函数组件中使用
组件库
ant-design