【raect】初识react

---

前言

本文是对react的一个基础知识讲解，若有不对的地方，希望大佬们在评论区多多指教

---

一、Ref

可以使用ref引用到DOM对象
1、字符串ref

<input
	type="text"
	placeholder="请输入待办事项标题"
	value={this.state.inputValue}
	onChange={this.handleInputChange}
	ref="inputRef"
/>
this.refs.inputRef.focus()

字符串ref已被弃用
2、React.createRef()
·创建ref对象

inputRef = React.createRef()

·绑定ref对象

<input ref={this.inputRef} />

在ref对象中有一个current属性，在current属性中保存了ref对象的数据值
·引用ref的值的使用

this.inputRef.current.focus()

二、列表渲染

在react组件中，实现列表渲染，通常调用数组的迭代方法，比如：

<div>
	<div>所有待办事项：</div>
	{this.props.todos.map(todo => {
		return (
		<TodoListItem key={todo.id} todo={todo} />
		)
	})
}
</div>

在遍历迭代到数组每一项时，渲染React元素，同样需要绑定key值
key值的绑定是为了标识的虚拟节点，在react编译时识别节点能否复用使用到的（虚拟DOM的比较中会使用到）

三、条件渲染

利用if-else、三目运算符、短路运算符等实现条件渲染

<div>
	<div>所有待办事项：</div>
	{todos.length 
		?
	 todos.map(todo => {return (<TodoListItem key={todo.id} todo={todo} />)})
		:
	<div>待办事项为空，请添加新待办事项</div>
	}
</div>

四、组件通信

1.父子通信

父传子：props，父组件中渲染子组件实例时，在标签中使用key=value键值对将父组件的数据通过属性传给子组件，子组件中接受属性数据使用即可（class组件可使用this.props获取属性值，函数组件使用函数的第一个参数获取属性值）
子传父：props，父组件中渲染子组件实例时。传递属性时，属性值为父组件中定义的一个函数的引用（不含括号），在子组件中需要向父组件传递数据时，子组件调用属性中接受到的函数，并传递需要向父组件传递的数据作为函数参数即可。

2.跨组件跨层级通信

·状态提升
·转换为父子关系
·Context
·Flux,Redux,Mobx…
代码如下（示例）：

五、Context

是全局范围内实现组件间数据的共享，可以避免组件间传递数据时在每个组价中添加props属性来传递数据的麻烦。

API

·React.createContext()
·Context.Provider

利用Provider组件，可向其包裹的后代的组件提供共享的数据，在value属性就是后代共享的数据值

<TodoProvider value={{todos:this.state.todos}}>
	<TodoHeader />
	<TodoInput add= { this.handleAdd } />
	<TodoList todos= {this.state.todos} />
	<TodoFooter />
</TodoProvider>

·Context.Consumer
当后代组件需要使用祖先组件中通过Provider组件提供的共享数据时，可使用Consumer组件：

<TodoConsumer>
	{value => {
		const {todos} = value
		const completedCount = todos.filter(todo =>todo.completed).length
		return (
			<>
				<span>总共{todos.length}项，已完成{completedCount}项</span>
				<button>clear</button>
			</>
		)
	}
}
</TodoConsumer>

Consumer组件的孩子节点是一个函数，该函数接受Provider组件的value作为参数，返回渲染后的React元素

·class.contextType
这是类组件中的静态属性

import React,{Component} from 'react'
import {TodoContext} from '../utils/TodoContext'
export default class TodoListItem extends Component {
	//设置类的静态属性contextType为一个context对象
	static contextType = TodoContext
	//这样就可以在类的成员方法中，调用this.context属性
	//获取最近的Provider 组件中value属性值数据
	render(){
		const {id,title,completed} = this.props.todo
		//从this.context获取在Provider组件的value中保存的共享数据
		const {toggle,remove} =this.context
		return (
			<div>
				<input type="checkbox" checked={completed} onChange={() => toggle(id) />
				<br>
				<span>{title}</span>
				<br>
				<span>{completed ? ['已' : '未'}完成</span>
				<button onClick={()=>remove(id)}>删除</button>
			</div>
		)
	}
}

总结

以上就是react的基础内容，本文仅仅简单介绍了react的基础，若有不对的地方，请多多指教。