B06.ReactJS.txt

UP 返回
ReactJS核心思想:组件化  维护自己的状态和UI  自动重新渲染  

多个组件组成了一个ReactJS应用

React是全局对象   顶层API与组件API

React.createClass创建组件类的方法

React.render渲染,将指定组件渲染到指定DOM节点

render:组件级API,返回组件的内部结构


React.render被ReactDOM.render替代

【【【ReactJS组件生命周期

1.创建阶段

getDefaultProps:处理props的默认值 在React.createClass调用


2.实例化阶段

React.render(<HelloMessage 启动之后

getInitialState、componentWillMount、render、componentDidMount

state:组件的属性,主要是用来存储组件自身需要的数据,每次数据的更新都是通过修改state属性的值,ReactJS内部会监听state属性的变化,一旦发生变化的话,就会主动触发组件的render方法来更新虚拟DOM结构

虚拟DOM:将真实的DOM结构映射成一个JSON数据结构


3.更新阶段

主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整

componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

4.销毁阶段

销毁时被调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作

componentWillUnmount

【【【ReactJS组件通信

ReactJS组件关系是一层套一层,DOM结构 组织结构比较清晰

父组件 子组件

1.子组件如何调用父组件
 
this.props

2.父组件如何调用子组件

首先用属性ref给子组件取个名字吧

this.refs.名字.getDOMNode().

【【【JSX实战

React Native中没有DOM的概念,只有组件的概念,所以我们在ReactJS中使用的Html标签以及对DOM的操作是不起作用的,但是组件的生命周期、JSX的语法、事件绑定、自定义属性等,在RN和ReactJS中是一样的。
DOWN 返回