React 再学习2_组件的创建和使用

版权声明：随意了，开心就好。反正是给大家分享的笔记 https://blog.csdn.net/u011486491/article/details/82421185

React 再学习2

基础的组件和组件的传值

我们新建的组件HelloMessage。使用方法和一般的标签一样。

在传值的时候，我们直接往标签中加入值就好了，然后这个值会存在标签的props中，用的时候拿就好了。

传递对象

直接传入data不行的，只能这么传。

自定义组件和传参

自定义组件就像我们创建了一个函数。

这里在标签中自定义了组件Welcom。然后传递参数过去。

和之前的组件不同，这里传递的是参数，拿取的时候不再是通过props拿取。

还有，自定义组件的名字必须是大写开头！

组件的默认值

在组建中，如果没有参数，我们可以使用默认值。1为内部设置；2为外部设置，表示某一个组件的默认值。2的优先级高于1.

组件内可变的私有变量

state是组件内可被改变 私有的值。不可通过外部访问和修改。在state被修改的时候组件会重新调用render，重新渲染。

注意这里的构造函数中的super的固定写法。

state的简单实用例子

注意这里定时器的bind(this)，其实是绑定作用域。将作用域绑定在该组件内。

组件嵌套组件

父传递数据给子

这里要记住的是父布局只能有一个！在嵌套时的数据传递是一层一层传递的，子布局只能从父布局那里获得参数。

兄弟组件之间的值传递

兄弟组件之间的数据传递，还是依赖的是修改他们共同的父组件的state进行的。因为state修改后，会重新渲染与之相关的组件。这里的重点是我们可以将父组件的方法传入子组件内，由子组件来调用和操作服组件的方法。

这种修改方式可推广至子数据传父等操作

操作嵌套组件

我们通过this.props.chilren可以拿到组件内的孩子组件。这里我们为每个孩子组件替换了他们的值。

组件的生命周期：

三种状态和五种处理函数:

三种状态：

1. lMounting：已插入真实 DOM

2. Updating：正在被重新渲染

3. Unmounting：已移出真实 DOM

五种处理函数:

1. componentWillMount()：组件将要初始化prop，这个方法在初始化render的时候不会被调用

2. componentDidMount()：返回一个布尔值，在接收到新的props和更新state的时候调用，初始化时不被调用

3. componentWillUpdate(object nextProps, object nextState)：组件将要更新

4. componentDidUpdate(object prevProps, object prevState)：组件完成更行立即调用，初始化时不被调用

5. componentWillUnmount()：在组建从DOM中移除时调用

6. 特殊的：ComponentDidCatch：错误处理