react 学习总结(一)

参考网站为：
https://zh-hans.react.dev/
网站内容和内置沙盒都很不错

我在会vue的基础上来对比react学习，个人理解如下：
相同点：

• 都有组件的概念，都是为了减少冗余代码；
• 标签引入值时候类似， 但是有些许差别，react在引用内容时候基本是两种方式
• <MyWay className="color"></MyWay> 自定义的组件为了和react自带的做区分，首字母必须大写。此处用 “” 引用color
• <MyWay age={age}></MyWay> 用{}去引用值age
• react和vue 一样都有props 的概念，通过该方式进行传参。react使用方式如下：

1. 传属性名

function Content({name}){
	return <p>我的名字是：{name}</p>
}
export default function Box(){
	retutn (
		<div>
			<p>下面引用子组件</p>
			<Content name="哈哈"></Content>
		</div>
		)
}

2. 传整体组件

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