测试案例：

效果

需求:

1. 界面效果如下

2. 根据指定的关键字在github上搜索匹配的最受关注的库

3. 显示库名, 点击链接查看库4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars

今天很累，也没时间看了，只写重点，那天有时间再写全吧（大概率不会了(●'◡'●)）

1⃣连续解构赋值 + 重命名

//连续解构赋值
const {keySearch: {value},props:{setData}} = this;
console.log(value)

//连续解构赋值 + 重命名 value
const {keySearch: {value: keyword},props:{setData}} = this;
console.log(keyword)

<input type="text" ref={c => this.keySearch = c}　/>

拿到this的 keySearch 属性 ，然后拿到 keySearch 的value属性 重命名给keyword 变量

同理，拿到this的props ，并且拿到setData 属性

代码看github 不贴了。。。 贴个list吧

class UserList extends Component {
    render() {
        const {userInfo:items,loading} =this.props;
        return (
            <div className="row">
                {
                loading?<div>loading</div>:
                items.length===0?<div>hello</div>:
                items.map(item=>{
                    return (
                        <div className="card" key={item.id}>
                            <a href={item.html_url} target="_blank" rel="noreferrer">
                                <img alt="avatar" src={item.avatar_url} style={{width: '100px'}}/>
                            </a>
                            <p className="card-text">{item.login}</p>
                        </div>
                    )
                })}
            </div>
        );
    }
}