ReactJs

1.react独有的JSX语法,故<script type="text/babel"></script>
react.js是react的核心库;react-dom.js是提供DOM相关的功能;Brower.js作用是将JSX语法转为javaScript语法
2.ReactDOM.render()是React最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点
3.JSX语法:HTML语言直接写在JavaScript语言之中,不加任何引号,
规则:遇到 < 开头就用HTML规则解析,遇到代码块 { 开头,就用JavaScript规则解析
var names = ['aa','bb','ss']
ReactDOM.render(
<div>
{names.map(function(name){return <div>hello,{name}</div>})
}
</div>
document.getElementById('example')
)
4.react组件,React.createClass方法就用于生成一个组件类
****组件类的第一个字母必须大写
组件类只能包含一个顶层标签,就是下面的return里面只能有一个标签,如果加一个p标签则报错
组件的属性可以在组件类的this.props对象上获取
添加组件属性,注意的是 class属性需要写成className,for属性写成htmlFor,这是因为class和for是JavaScript的保留字

注意:定义标签时,只允许被一个标签包裹 原因是:一个标签会被转译成对应的React.createElement调用方法,最外层没有被包裹 显然是无法转译成方法调用的

  小写首字母对应的是DOM元素,组件元素对应大写首字母

this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性,它表示组件的所有子节点

在构造函数中可以通过props获得传入的prop,在其他函数中通过this.props访问传入的prop的值
如果没有子节点就是undefined,有一个就是object,有多个就是array
react.Children来处理this.props.children 可以用React.props.children来遍历,
React.Children.map(this.props.children,function(child){
return <li>{children}</li>
}

var helloMessage = React.createClass({
render:function() {
*****return <h1>Hello {this.props.name}<h1>
}
});
ReactDOM.render(
<HelloMessage name="alhh" />
document.getElementById('example')
)
})
5.PropTypes
组件的属性可以接受任意值,字符串、对象、函数等,有时需要一种机制,验证别人使用组件时,提供的参数是否符合要求,
PropTypes属性,就是用来验证组件实例的属性是否符合要求
getDefaultProps 方法可以用来设置组件属性的默认值
6.获取真实的DOM节点
注意 由于this.refs.[refName]属性获取的是真实DOM.所以必须等到虚拟DOM插入文档以后,才能使用这个属性,否则会报错,
以下代码为组件指定click事件,确保了只有等到真实DOM发生Click事件之后,才会读取this.refs.[refName]属性
var MyComponent = React.createClass({
handleClick:function(){
this.refs.myInfut.focus();
}})
render:function(){
return (
<input type="text" ref="myInput"/>)}
7.this.state
React将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI
this.props和this.state都用于描述组件的特性,可能会产生混淆,区分方法是,this.props表示那些一旦定义就不再改变的特性
this.state是会随着用户互动而产生变化的特性
8.组件的生命周期
组件的生命周期分为三个状态:Mounting:已插入真实DOM,Updating:正在被重新渲染 ,Unmounting:已移出真实DOM
React为每个状态都提供了两种处理函数,will函数时在进入状态之前调用,did在进入状态之后调用,三种状态共计有5种处理函数
componentWillMount() componmentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidUpdate(object prevProps,object prevState)
componentWillUnmount()
另外,react还提供两种特殊状态的处理函数
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps,object nextState):组件判断是否重新渲染时调用
React组件样式是一个对象,style = {{opacity:this.state.opacity}} 第一个大括号是js语法,第二个大括号表示样式对象

componentWillReceiveProps:组件收到新的props时会触发,(即当父级组件render刷新了子组件的props时触发)此时更新状态

 

原文地址:https://www.cnblogs.com/alhh/p/7844565.html