如何渲染到容器
直接上代码:
//第一个参数是构造的组件,第二个参数是使用组件的容器
ReactDom.render( <Avatar name='' link='' />, document.getElementByID(''));
render
渲染页面 将组件放到选定的元素里面
如何定义组件
使用React.createClass({render:function(){return ( 我是dom元素 )}})
构建
var ProfilePic = React.createClass({
render: function() {
//可以在return前进行相关处理
return (
<img src={this.props.link} />
);
}
});
1.return()
括号中只能填写一个标签,否则报错
2.this.props
是ReactDOM.render
中传递的属性,是一个对象 对于组件套组件的方式可以传递属性值,如下面例子
组件套组件
// 渲染到容器
ReactDOM.render(
<Avatar
name="GuoYongfeng"
link="https://avatars2.githubusercontent.com/u/8686869?v=3&s=460"
/>,
document.getElementById('example')
);
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic link={this.props.link} /> //this.props包含了name和link的属性,同时在ProfilePic组件中可以使用this.props获取link的值
<ProfileLink name={this.props.name} />
</div>
);
}
});
如何设置某个变量的初始值
使用getInitialState:function(){return {}}
声明初始化变量,使用this.setState({键值对})
修改getInitialState
函数中的变量,通过this.state
对象获取属性的值,代码如下:
var ClickApp = React.createClass({
getInitialState:function(){
return {
clickCount: 0,
}
},
handleClick: function(e){
this.setState({
clickCount: this.state.clickCount + 1,
});
},
render: function(){
return (
<div>
<h2>点击下面按钮</h2>
<button onClick={this.handleClick}>点击我</button>
<p>你一共点击了:{this.state.clickCount}</p>
</div>
)
}
});
getInitialState
在组件的生命周期内只会运行一次,用来设置组件的初始状态。
this.props.children
this.props
对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children
属性,它表示组件的所有子节点。this.props.children
的值有三种可能:如果当前组件没有子节点,它就是 undefined
;如果有一个子节点,数据类型是 object
;如果有多个子节点,数据类型就是 array
。React 提供一个工具方法 React.Children
来处理 this.props.children
。我们可以用 React.Children.map
来遍历子节点,而不用担心 this.props.children
的数据类型是 undefined
还是 object
PropTypes
验证组件提供的参数是否满足要求。如 propTypes: { title: React.PropTypes.string.isRequired },render:function(){return}
代码的作用就是说明title
是必须填写的而且为字符串。 使用 getDefaultProps
来配置默认的字符串 getDefaultProps : function () { return { title : 'Hello World'};},
组件的生命周期
生命周期分为三个状态:
Mounting
:已插入真实 DOMUpdating
:正在被重新渲染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)
:组件判断是否重新渲染时调用
JSX转化器
1.内嵌的jsx
代码,需要在script标签中要加上type="text/babel"
,并引入browser.min.js
5.8.24文件,或者使用bower install babel --save-dev
下载babel文件中获取,将ES6
转化为ES5
2.[已废弃]使用react-tools
模块,将代码转化成线上代码 使用npm install -g react-tools
安装,使用jsx --watch src/ build/
转化
3.可以直接使用babel
转化,babel --presets react [es2015] src --watch --out-dir build
,其中[es2015]
是选填项,src
是源文件路径 build
是编译后的文件路径
4.在gulp
中使用gulp-react
转化
Html转义
对于某些富文本内容,在页面上显示
var content='<strong>content</strong>';
React.render(
<div>{content}</div>,
document.body
);
//会直接显示 <strong>content</strong> 相当于ejs中<%= %>
Html默认会对Html文章转义,如何不转义
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);
CDN文件
1.reactreact
包括 React.createElement
、 React.createClass
、React.Component
、 React.PropTypes
、 React.Children
react-dom
包括 ReactDOM.render
、 .unmountComponentAtNode
、 .findDOMNode
react-dom-server
包括.renderToString
和 .renderToStaticMarkup
react-with-addons
HTML 标签 vs. React 组件
React.render
方法可以渲染HTML结构,也可以渲染React组件。JSX
使用首字母大小写来区分是本地组件类还是Html标签。
(1)渲染HTML标签,声明变量采用首字母小写
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
(2)渲染React组件,声明变量采用首字母大写
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
Small Tips
1.数据的传递都是需要至于{}
之中,包括赋值<div {...other} className={fancyClass} />
,{}
中的变量都是可以通过ReactDom.render
时传入
2.使用default
为前缀,加上Checked
,Value
等设置默认值,如defaultChecked
,defaultValue
等,在组件中使用已有的属性。
3.this.refs
引用对象集合,在Dom元素上添加了ref
属性后,就会将这个Dom元素添加到this.refs
之中,在页面中这个标签的值是唯一的,this.refs.xxxx.value
这种方式可以获取变量的值,ref
是一种回调的原理,当子组件的该属性值改变,相应的值会回调给父组件
4.在组件实现时,return(<div>{ }</div>)
中的{}
可以加入大量的javascript处理函数,如下:
return (
<ul>
{
this.props.list.map(function (child) {
return <li>{child}</li> //注意这种写法,<li>{child}</li>
})
}
</ul>
);
5.组件可以直接当做Dom标签一样使用,像button
,h1
等
6.与Javascript DOM中一样的写法,class
对于className
,html
对应于htmlFor
;另外,对于非html内置的属性,一定要加上data-
,如<div data-custom-attribute="foo" />
`
7.JSX 的基本语法规则
遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
遇到代码块(以 { 开头),就用 JavaScript 规则解析
8.this.props 和 this.state不同点
由于 this.props
和 this.state
都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props
表示那些一旦定义,就不再改变的特性,而 this.state
是会随着用户互动而产生变化的特性。
9.组件中样式的写法:style="opacity:{this.state.opacity};"
这种方式错误;使用 style={{opacity: this.state.opacity}}
这种方式,第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。
10.在componentDidMount
中的设置请求返回的数据需要特别注意只有当数据返回回来才有效,通过 this.isMounted()
判读,或者直接使用promise
的then
方法.查看示例12
参考文档
1.阮一峰老师的[react-demos](https://github.com/ruanyf/react-demos)