组件库开发思想

实战：

1. 前端玩的就是数据到视图的映射，而react也是在干这个事儿。
2. 一个好的组件设计，最好底层还是复用原生的html，然后把用户输入的属性透传到原生的HTML上。

1. Button

1. className函数
2. this.props.children
3. button属性本身就有disabled

2. Input

参考 HTML 事件参考手册
html input 标签身上具有onChange和onInput事件属性，其实两个作用是一样的

3. Modal

1. 遮罩层masker
2. Modal、ModalHeader、ModalSession

4. Table

const columns = [{
      dataIndex: 'Name',
      title: '姓名'
    }, {
      dataIndex: 'Age',
      title: '年龄'
    }, {
      dataIndex: 'Sex',
      title: '性别'
    }]
    const dataSource = [{
      Name: '小明',
      Age: 18,
      Sex: '男'
    }, {
      Name: '小红',
      Age: 20,
      Sex: '女' 
    }]
{
	for()
}

原始table

<table>
    <thead>
        <tr>
            <th>姓名：</th>
            <th>年龄：</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

进阶一 动态渲染：

<table>
   <thead>
        {
            columns.map(col => (
                <th>
                    {col.title}
                </th>
            ))
        }
    </thead>
    <tbody>
        {
            dataSource?.length > 0 ? dataSource.map(row => (
                <tr>
                    {
                        columns.map(col => (
                            <td>
                                {
                                    row[col.dataIndex]
                                }
                            </td>
                        ))
                    }
                </tr>
            )) : (
                <div>
                    暂无数据
                </div>
            )
        }
    </tbody>
</table>

进阶2 可选操作

26fen

React做的性能优化有哪些。
Antd组件库文档贡献者；
内部组件开发者；