Rreact基础知识总结

Rreact基础知识总结

1、脚手架安装方式

 1) npm install -g create-react-app （安装脚手架）
2) create-react-app my-app （my-app为项目名称）
3) npm start (运行这个项目)

2、JSX语法

 1）如果遇到<>,React就会使用HTML解析
2）如果遇到{},React就会使用JS解析
3）只有一个根标签
4）标签中混入js表达式要用{ }
5）注释太长折叠技巧：注释第一行用：//#region，注释最后一行用：//#endregion

3、组件

1.) 函数组件

 function MyComponents() {
// console.log(this); //this：undefined
return <h2>我是函数式组件（是用于简单组件的定义）</h2>;
}
ReactDOM.render(<MyComponents />, document.getElementById("Root"));`

函数中的this未定义的原因：
* 函数组件经过babel 翻译，开启了严格模式
* 严格模式下this不准指向window

2.) 类组件
方法1

import React from 'react'
import ReactDOM from 'react-dom'
export default class Item extends React. Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}

方法2 [推荐写法]

import React, { Component } from 'react'
export default class Item extends Component {
constructor(props) {
super(props)
this.state = {
name: '张三',
}
}
changeName = () => {
this.setState({ name: '李四' })
}
render() {
// 解构
const { name } = this.state
return (
<div>
<h1>Hello {name}</h1>
<button className="btn"
onClick={() => this.changeName}
>更改名字</button>
</div>
)
}
}

3.) 组件三大核心属性

• 3.1 state [状态]
  ① state是组件对象最重要的属性，其值是对象。
  ② React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
  ③ 只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

• 3.2 props [传值]
  ① state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变
  ② 使用prop-types库进限制（需要引入prop-types库）

   1、安装方式：npm i prop-types
  2、导入：import PropTypes from 'prop-types'
  3、具体方式如下：
  

③ 案例：

// 父组件
import React, { Component } from 'react'
import Item from './Item'
export default class Father extends Component {
constructor(props) {
super(props)
this.state = {
data: [
{ id: 1, text: '张三1' },
{ id: 2, text: '张三2' },
{ id: 3, text: '张三3' },
{ id: 4, text: '张三4' },
],
date: new Date(),
}
}
deleteItem = (id) => {
const { data } = this.state
// 匹配处理数据
const newData = data.filter(item => {
return item.id !== id
})
this.setState({ data: newData })
// console.log(id);
}
// 更新时间
tick = () => {
this.setState(
{ date: new Date() },
)
}
// 组件挂载时调用
componentDidMount() {
this.timerID = setInterval(() => {
this.tick()
}, 1000)
}
// 组件销毁时调用
componentWillUnmount() {
clearInterval(this.timerID);
}
render() {
const { data } = this.state
return (
<div>
<h4>现在是 {this.state.date.toLocaleTimeString()}</h4>
<ul>
{data.map((item, index) => {
// 通过params这个属性向子组件传值
// 通过deleteItem这个属性向子组件传递删除的函数
return <Item params={item} key={item.id} deleteItem={this.deleteItem} />
})}
</ul>
</div>
)
}
}

// 子组件
import React, { Component } from 'react'
export default class Item extends Component {
constructor(props) {
super(props)
this.state = {
}
}
remove = (event) => {
const { id } = this.props.params
// 阻止默认事件
event.preventDefault()
if (window.confirm('确定删除吗')) {
// 通过父组件传递来的函数删除子组件（并传入当前的id）
this.props.deleteItem(id)
}
}
//PropTypes 来验证传入数据是否有效，static 不写会有警告
static propTypes = {
params: PropTypes.object.isRequired,
deleteItem: PropTypes.func.isRequired,
}
render() {
// 解构传递来的文本
const { text } = this.props.params
return (
<li>
姓名： {text}
<a href="javascript:;" onClick={this.remove}>删除</a>
</li>
)
}
}

• 3.3 refs
  1）ref用于标识组件内部某个元素
  2）refs 是标识集合
  3）回调形式的ref

<input ref={v=>this.input1 = v}/>

       4） createRef创建ref容器

myRef = React.createRef()
<input ref={this.myRef}/>

4) 共同点

• 组件名必须大写。

• 父组件props有变化时，子组件随之变化。

5）区别

4、组件通信

	1) 父传子
1、父组件提供要传递的state数据。
2、给子组件标签添加属性，值为state中的数据。
3 、子组件通过props接收父组件中传递的数据。
注意：组件中使用 constructor （props） 必须调用 super（props） 函数
2) 子传父
1、父组件提供一个回调函数（用于接收数据）-->这个函数不是父组件调用而是由子组件调用。
2 、将该函数作为属性的值，传递给子组件

//父组件
class Counter extends React.Component {
constructor() {
super();
this.state = {
count: 1,
};
}
onIncrement = () => {
this.setState({
// count: this.state.count+1,
count: ++this.state.count,
});
};
render() {
return (
<div>
// count:给子组件标签添加属性，值为state中的数据
// onIncrement为父组件提供一个回调函数 
<Child1 count={this.state.count } onIncrement={this.onIncrement}/>
</div>
);
}
}

// 子组件
const Child1 = (props) => {
function add() {
// 通过props接收到的函数，由子组件调用，实现点击增加count
props.onIncrement();
}
//子组件通过props接收父组件中传递的数据。
return (
<div>
<h1>计数器：{props.count}</h1>;
<button onClick={this.addCount}>+1</button>
</div>
)
};

	3) 兄弟传参
1、思路：将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
2、要通讯的子组件只需要通过props接收状态或操作状态的方法

4、表单

1）受控组件
① 在HTML中，表单元素、、、的值的改变是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
② 受控组件我们一般需要初始状态和一个状态更新事件函数
③ 例如下面代码

<input type="text" value={this.state.value} onChange={this.saveInputValue} />

2）非受控组件

简单来讲，就是不受我们控制的组件
一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态
当需要时，可以使用ref 查询 DOM并查找其当前值

3）注意

defaultChecked 和 checked 的区别，类似的还有defaultValue 和 value。
defaultChecked 只在第一次起作用

5、状态提升

关于state中的数据放在哪个组件中
1) 某个组件中使用，放在其自身的state中
2) 某些组件中使用，放在其共同的父亲的state中（状态提升）

6、注意要点

1）类名要写成className
2）行内的style要写成style={{ key: value}}的形式，例如{{color："#f00"}}

最后

以上就是冷酷火车为你收集整理的Rreact基础知识总结的全部内容，希望文章能够帮你解决Rreact基础知识总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。