React组件

Posted 2021-01-03 2oex

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>