属性(Props)

props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有 props 的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的
参数来接收 props :

在组件上通过 key=value 写属性,通过 this.props 获取属性,这样组件的可复用性提高了。
注意在传参数时候，如果写成 isShow="true" 那么这是一个字符串如果写成 isShow={true} 这个是布尔值
{...对象} 展开赋值
默认属性值

*.defaultProps = {

}

static defaultProps = {
    myname:"默认的myname",
    myshow:true
}

prop-types 属性验证

import propTypes from "prop-types";

*.propTypes={
    name:propTypes.string,
    age:propTypes.number
}

static propTypes={
    myname:propTypes.string,
    myshow:propTypes.bool
}

属性 vs 状态

相似点：都是纯 js 对象，都会触发 render 更新，都具有确定性（状态/属性相同，结果相同）

不同点：

属性能从父组件获取，状态不能
属性可以由父组件修改，状态不能
属性能在内部设置默认值，状态也可以，设置方式不一样
属性不在组件内部修改，状态要在组件内部修改
属性能设置子组件初始值，状态不可以
属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。 state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。 state 中状态可以通过 this.setState 方法进行更新， setState 会导致组件的重新渲染。
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props ，否则组件的 props 永远保持不变。
没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

渲染数据

条件渲染

{
    condition ? '渲染列表的代码' : '空空如也'
}

列表渲染

// 数据
const people = [
    {
        id: 1,
        name: 'Leo',
        age: 35
    },
    {
        id: 2,
        name: 'Xiao
    }
]
// 渲染列表
{
    people.map(person => {
        return (
            <dl key={person.id}>
                <dt>{person.name}</dt>
                <dd>age: {person.age}</dd>
            </dl>
            )
        }
    )
}

React 的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。

要实现这个操作，只需要交换一下 DOM 位置就行了，但是 React 并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。

但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是 key ，这个 key 必须是每个元素唯一的标识

dangerouslySetInnerHTML

对于富文本创建的内容，后台拿到的数据是这样的：

content = "<p>React.js是一个构建UI的库</p>"

处于安全的原因，React 当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用 dangerouslySetHTML 属性，它允许我们动态设置 innerHTML

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            content : "<p>React.js是一个构建UI的库</p>"
        }
    }

    render () {
        return (
            <div
            // 注意这里是两个下下划线 __html
            dangerouslySetInnerHTML={{__html: this.state.content}}
            />
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

属性 vs 状态​

渲染数据​

属性 vs 状态

渲染数据