先贴个学习链接 http://huziketang.mangojuice.top/books/react/
第一阶段
{}
内可以放任何 JavaScript 的代码,包括变量、表达式计算、函数执行等等。render
会把这些代码返回的内容如实地渲染到页面上,非常的灵活。我们来一个关于
state
和props
的总结。state
的主要作用是用于组件保存、控制、修改自己的可变状态。state
在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为state
是一个局部的、只能被组件自身控制的数据源。state
中状态可以通过this.setState
方法进行更新,setState
会导致组件的重新渲染。props
的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的props
,否则组件的props
永远保持不变。state
和props
有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的state
中的数据可以通过props
传给子组件,一个组件可以使用外部传入的props
来初始化自己的state
。但是它们的职责其实非常明晰分明:state
是让组件控制自己的状态,props
是让外部对组件自己进行配置。如果你觉得还是搞不清
state
和props
的使用场景,那么请记住一个简单的规则:尽量少地用state
,尽量多地用props
。没有
state
的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。前端应用状态管理是一个复杂的问题,我们后续会继续讨论。
第二阶段
- state = {
arras: []
}
现在存在两个同级组件:
compoment1需要用arras
compoment2也需要用arras
这时,如果把arras存放在任意一个组件的state中,另一个组件都无法获取到数据。所以,我们将arras放在compoment1和compoment2的公共父组件compoment中,再利用props传递数据给两个子组件。这种方式叫状态提升。 - 组件挂载
ReactDOM.render( <Header />, document.getElementById('root'))
会被编译成:
ReactDom.render(
React.createElement(Header, null)
document.getElementById('root')
) //其实我们把Header组件传给React.createElement函数,又把函数返回结果传给React.render
具体过程:
const header = new Header(props, children)
const headerJsxObject = header.render()
const headerDOM = crateDOMFromObject(headerJsxObject)
document.getElementById('root').appendChild(headerDOM )
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
class Header extends Component {
constructor () {
super()
console.log('construct')
}
componentWillMount () {
console.log('component will mount')
}
componentDidMount () {
console.log('component did mount')
}
render () {
console.log('render')
return (
<div>
<h1 className='title'>React 小书</h1>
</div>
)
}
}
=>
construct
component will mount
render
component did mount
第三阶段