React基础知识（一）

一、基础知识点

1、多个类名设置方式

方法一：
使用join方法

<div className={[styles['slider-out'], 'flex-acenter'].join(' ')} style={styleOut}>
    </div>

方法二：
使用classnames依赖优化类名处理
下载依赖：npm i classnames
导入依赖包：import className from ‘classnames’;
使用：

// 逻辑与（&&）--处理单个类名
<div className={className('btn', disabled && 'btn-disabled')} />
// 对象语法--处理多个类名
<div className={className('btn', 
{
'btn-disabled': disabled,
'btn-small': size === 'shamll'
})} />

2、useRef与DOM操作

1、创建ref对象，并与JSX绑定
const inputRef = useRef(null)

2、根据业务进行DOM操作：通过inputRef.current拿到DOM对象
inputRef.current.value
inputRef.current.focus()
*注意：
不要在组件渲染时使用ref进行DOM操作，此时ref还没有值
操作文本框的值，推荐使用状态（受控组件）操作

二、组件通讯

1、组件的props

作用：给组件传递数据，时React组件通讯的基础
使用步骤：
1.传递props：在组件标签上添加属性

2.接受props：通过参数拿到， props是只读对象

const Avatar = props => {
return <img src={props.imgUrl} width={props.size} alt="" />
}

推荐使用解构，接收props

const Avatar = ({imgUrl, size = 100}) => {
return <img src={imgUrl} width={size} alt="" />
}

2、父子组件通讯(原则：谁的数据谁负责)

父–>子（传递props）
父组件提供数据，通过props传递给子组件使用

<Todo id={id} text={text} done={done} />
<Todo {...item} />

子–>父
（1）父组件准备修改数据的函数，传递给子组件

const onToggle = id => {}
<Todo onToggle={onToggle} />

（2）子组件调用函数，将数据作为参数回传给父组件

const TOdo = ({ id, onToggle}) => {
	return <li onClick={() => onToggle(id)}></li>
}

3、兄弟组件间的通讯

状态提升：如果两个兄弟组件要通讯，就把共享的数据提升到公共父组件中

（1）找到父组件，提供共享数据

// 父组件
const App = () => {
	// 共享数据：选中的数据
	const [chatFriend, setChatFriend] = useState(firneds[0])
	// 修改状态的函数
	const onSelectFriend = friend => {
		setChatFriend(friend)
	}
}

（2）使用数据，展示名称（父到子通讯）

{/*聊天窗口*/}
<Chat chatFriend={chatFriend} />

const Chat = ({chatFriend}) => {
return (
	<div className="header">{chatFriend.name}</div>
)
}
export default Chat;

（3）修改数据，切换选中名称（子到父通讯）

{/*名字列表*/}
<Friends onSelectFriend={onSelectFriend} />

const Friends = ({onSelectFriend}) => {
return (
	<div onClick={() => onSelectFriend(item)}>{item.name}</div>
)
}
export default Chat;

4、非父子组件通讯------后代关系

Context（上下文）：范围，无视组件层级关系，跨组件通讯

（1）创建Context对象

const ThemeContext = createContext()

（2）划定范围，提供共享数据(value可以是一个对象，传递多个共享的数据)

<ThemeContext.Provider value={共享数据}>
	父组件
</ThemeContext.Provider>

（3）范围内的组件，获取共享数据

const 共享数据 = useCOntext(ThemeContext)

三、useEffect的使用

1、useEffect基本使用

useEffect的作用：在组件生命周期的三个阶段（挂载、更新、卸载），执行网络请求、浏览器API等操作

这些操作，也叫：副作用(side effects)

语法：useEffect(Effect函数, 依赖项数组) Effect函数：副作用代码， 依赖项数组：控制Effect函数的执行时机，可选

挂载时：

useEffect(()) => {
	// 发送请求等。。。
}, [])

更新时：

useEffect(() => {
	// 重新发送请求等操作。。。
}, [roomId])

卸载时：

useEffect(() => {
	return () => { /*断开连接*/ }
}, [])

2、useEffect的扩展

（1）推荐：一个useEffect负责一个完整功能

useEffect(() => {
	console.log(`建立连接： ${roomId} 房间`)
	return () => {
		console.log(`断开连接： ${roomId} 房间`)
	}
}, [roomId])

（2）依赖项

useEffect(() => { /* 可变值 */ }, [可变值1， 可变值2])

需要作为依赖项的值： Effect中用到的可变值，比如，props/state/组件内创建的变量等
不需要作为依赖项的值：组件外创建的或导入的变量、函数等

（3）React Hooks 解释和使用规则

React Hooks是以use开头的函数，比如，useState/useEffect/useContext等
Hook（钩子）：为组件提供不同的React特性，比如，useState Hook为组件提供状态
可使用版本：React v16.7+
使用规则：只能在组件的顶层调用，不能嵌套在if、for、其他函数中
原理：React组件依赖Hooks的调用顺序，必须保证所有Hooks，在每次渲染时，调用顺序一致