-
JSX
- 一个组件类必须要实现一个
render方法,这个render方法必须要返回一个 JSX 元素。 - 在 JSX 当中你可以插入 JavaScript 的表达式,表达式返回的结果会相应地渲染到页面上。表达式用
{}包裹 - JSX 可以放置任何表达式内容。
- 一个组件类必须要实现一个
-
props
- 可以通过给组件添加类属性
defaultProps来配置默认参数。 props一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的props,从而达到更新的效果。
- 可以通过给组件添加类属性
-
事件
- 如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法
bind到当前实例上再传入给 React.js。
class Title extends Component { handleClickOnTitle (e) { console.log(this) } render () { return ( <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1> ) } } - 如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法
-
setstate
-
引出了
setState的第二种使用方式,可以接受一个函数作为参数。React.js 会把上一个setState的结果传入这个函数,你就可以使用该结果进行运算、操作,然后返回一个对象作为更新state的对象 -
我们进行了三次
setState,但是实际上组件只会重新渲染一次,而不是三次;这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的setState都进行合并以后再重新渲染组件。深层的原理并不需要过多纠结,你只需要记住的是:在使用 React.js 的时候,并不需要担心多次进行
setState会带来性能问题。
-
-
state是让组件控制自己的状态,props是让外部对组件自己进行配置。 -
一般来说,在 React.js 处理列表就是用
map来处理、渲染的。 -
对于用表达式套数组罗列到页面上的元素,都要为每个元素加上
key属性,这个key必须是每个元素唯一的标识。... class Index extends Component { render () { return ( <div> {users.map((user, i) => <User key={i} user={user} />)} </div> ) } } ...记住一点:在实际项目当中,如果你的数据顺序可能发生变化,标准做法是最好是后台数据返回的
id作为列表元素的key。