React(一)初识
来源:互联网 发布:4g网络优势 编辑:程序博客网 时间:2024/05/16 07:22
一 初识React
二 前置知识
三 基本方法
(1) ReactDOM.render是React的最基本方法,用于将模板转为HTML,并插入指定的DOM节点。
ReactDOM.render{
<h1>hello.world!<br>
document.getElementById("example");
};
(2) JSX语法
遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以{
开头),就用 JavaScript 规则解析
以数组方式
React.createClass 方法就用于生成一个组件类
- 组件类的第一个字母必须大写,否则就会报错,比如HelloMessage不能写成
helloMessage
。
(4)this.props.children
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是
this.props.children 属性。它表示组件的所有子节点
如果当前组件没有子节点,它就是undefined;
如果有一个子节点,数据类型是object;
如果有多个子节点,数据类型就是array。
React 提供一个工具方法 React.Children
来处理 this.props.children
。我们可以用 React.Children.map
来遍历子节点,而不用担心 this.props.children
的数据类型是 undefined
还是 object
。
(5)Proptype
组件类的PropTypes
属性,就是用来验证组件实例的属性是否符合要求
getDefaultProps
方法可以用来设置组件属性的默认值
(6)获取真实的DOM节点
组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM(virtual DOM)。只有当它插入文档以后
才会变成真实DOM。根据React的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生的变动部分,反应在真实的DOM上,这种算法叫做DOM diff。
MyComponent
的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个ref
属性,然后this.refs.[refName]
就会返回这个真实的 DOM 节点。(7)this.state
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
LikeButton
组件,它的 getInitialState
方法用于定义初始状态,也就是一个对象,这个对象可以通过this.state
属性读取。当用户点击组件,导致状态变化,this.setState
方法就修改状态值,每次修改以后,自动调用this.render
方法,再次渲染组件。 由于 this.props
和this.state
都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props
表示那些一旦定义,就不再改变的特性,而this.state
是会随着用户互动而产生变化的特性。
(8)表单
用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props
读取
this.props.value
读取,而要定义一个 onChange
事件的回调函数,通过event.target.value
读取用户输入的值。textarea
元素、select
元素、radio
元素都属于这种情况,(9)组件的生命周期
组件的生命周期分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,
will
函数在进入状态之前调用,did
函数在进入状态之后调用,三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
varHello= React.createClass({getInitialState:function () {return {opacity:1.0};},componentDidMount:function () {this.timer=setInterval(function () {varopacity= this.state.opacity;opacity-=.05;if (opacity<0.1) {opacity=1.0;}this.setState({opacity:opacity});}.bind(this),100);},render:function () {return (<divstyle={{opacity:this.state.opacity}}>Hello {this.props.name}</div>);}});ReactDOM.render(<Helloname="world"/>,document.getElementById('example'));
- react(一):初识react
- React(一)初识
- React Native学习一:初识React Native
- 小白学react-native android之路(一、初识react-native)
- 初识React
- 初识react
- 初识react
- 初识React
- React初识
- React初识
- 初识React
- 初识React
- React初识
- 初识React
- 【React】初识React
- React Native基础与入门(二)--初识React Native
- 初识OLAP(一)
- 初识 Service(一)
- (vue2.0 案例3.0) 在vue-cli 项目中 需要知道常见的配置 防止入坑
- solr6.1 安装,开发demo
- Android录制或播放语音消息时关闭其他媒体播放
- java基础之—String类学习笔记
- git工作原理
- React(一)初识
- 工作笔记之工具常用知识
- ListActivity的使用
- ......................
- 文章标题
- comma.ai的camera图片显示
- hdu 1521 (字典树)
- 配置Log4j(很详细)
- windows平台定期执行rman全备