React---小知識點總結

• {...this.props} 的定義

{...this.props}  是props所提供的语法糖，可以将父组件的所有属性复制给子组件，子組件可獲取父組件中所有參數等。

如下代碼片段：

/*查询列表*/
class SearchBookList extends Component{

    render(){
        const { bookList, onFetchBookIntro } = this.props;//此處獲取父組件的props
        return (
            <ul>
                {/*<BookListItem item={{ imgUrl:'http://image.cmfu.com/books/3330580/3330580.jpg', hTitle:"Hello World", subTitle: "第二章"}} />
                 <BookListItem item={{ imgUrl:'http://image.cmfu.com/books/3330580/3330580.jpg', hTitle:"Hello World", subTitle: "第二章"}} />*/}
                {bookList.map((book,i) =>
                    <BookListItem key={i} {...this.props} item={{
                        bookId:book._id,
                        imgUrl:book.cover,
                        hTitle:book.title,
                        subTitle: book.lastChapter,
                        retentionRatio:book.retentionRatio,
                        shortIntro:book.shortIntro,
                        author: book.author,
                        onFetchBookIntro: onFetchBookIntro
                    }}
                    />
                )}
            </ul>
        )
    }
}


//調用的組件
 <div className="bookListContainer">
 {len > 0? <SearchBookList {...this.props} />
 : <RecommendAndHistory {...this.props} />}
 </div>

---

• this.props.history

1. this.props.history.push(pathname,state)：可實現頁面跳轉。pathname：写跳转界面的路径；state：要传过去的数据。
2. this.props.history.goBack()：返回上一頁。
3. this.props.history.go(-2)：返回前兩個頁面。

 

• Redux中的dispatch

dispatch触发了一个修改state的操作，且只能通过dispatch触发修改。它的参数是一个action；
action表示当前dispatch（操作）的类型和载荷（数据）（payload），比方说我要修改系统主题色，那这个action可能就这么定义了{type: 'CHANGE_THEME', color: 'red'}，其中type是约定俗成的参数，且必填。

另：Redux是将react的state进行全局管理，也就是管理整个项目的state。

• HTML <img> alt 属性

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。

如下例：