React组件

Posted 2oex

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React组件相关的知识,希望对你有一定的参考价值。

React 组件

自定义组件

1、我们可以使用函数定义了一个组件:

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

2.const element = <HelloMessage /> 为用户自定义的组件。

注意,原生 html 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

如果我们需要向组件传递参数,可以使用 this.props 对象

*注意* 在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class for javascript 的保留字。

复合组件

通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离

React State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

将生命周期方法添加到类中

 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载。

当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载。

生命周期函数

componentDidMount()元素挂载完成之后触发的生命周期函数=== Vue中的mounted

//修改state的唯一方法

this.setState() 修改数据

@param 要修改的数据
@parma 修改完成之后的回调函数

    this.setState({
        index:this.state.index + 1
    },()=>{
    console.log(this.state.index)
        
    })

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子

在组件输出到 DOM 后会执行componentDidMount() 钩子,我们就可以在这个钩子上设置一个定时器。

this.timerID 为计算器的 ID,我们可以在 componentWillUnmount() 钩子中卸载计算器。

数据自顶向下流动

状态通常被称为局部或封装

称为自顶向下或单向数据流

React Props

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。


1.通过组件类的 defaultProps 属性为 props 设置默认值

2.Props 验证使用 propTypes

事件的this指向

call 和 apply 改变this指向
(传递参数不同)
bind 只改变this指向不会执行

()=>{}  函数调用 + 执行

bind(this) 返回一个函数 只调用

调用  ()
执行  在声明时指向

e.target 触发事件的Dom

e.currentTarget 绑定事件的Dom

事件

阻止事件的默认行为
e.preventDefault()

组件数据传递

父=>子

    props

子=>父

1.父组件

    父组件页面的(子)组件上定义一个事件
    <List  listItem={this.listItem.bind(this)}></List>
    
    listItem(res){
        console.log(res)
    }
    
2.子组件 

    <p onClick={()=>this.props.listItem(传递的数据)}></p>

以上是关于React组件的主要内容,如果未能解决你的问题,请参考以下文章

React 函数组件与class组件的区别

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

[译] 如何在React中写出更优秀的代码

是否有用于 React Function 组件的类型,包括返回片段、空值、字符串等?

react简介