JSX
- JSX实际上是一个javascript对象
//DOM元素结构
<div class = "hhh" id="yyy">
<button>点击</button>
</div>
//Javascript对象
{
tag:'div',
attrs:{className:'hhh',id:'yyy'}
children:[
{
tag:'button',
children:[点击]
}
]
}
- HTML中的DOM结构可以通过Javasvript对象进行描述，React.js将javascript的语法进行扩展，使得能够在javascript中直接编写类似HTML标签结构的语法即JSX，编译之后会将JSX结构转换为Javascript的对象结构
- Babel编译+React.js构造将JSX转换为Javascript对象
- ReactDOM负责将javascript对象变为DOM元素并渲染到页面中
组件的render方法
- 组件类一般都需要继承component，并且实现render方法，返回JSX元素
class Hye extends Component{
render(){
return(
<h1>我的第一个组件</h1>
)
}
}
- 返回的JSX元素应使用最外层将全部包裹起来，不能返回多个并列的JSX元素
- 组件可以进行嵌套，组合
class Hyq extends Component {
render () {
return (
<h1>这是我</h1>
)
}
}
class Home extends Component {
render () {
return (
<div>
<Hyq />
</div>
)
}
}
- 自定义组件应以大写开头
- 绑定事件
class Ti extends Component{
handleClick(e){
console.log(e.target+": 阿，点到我了");
}
render(){
return(
<buttom onClick = {this.handleClick}>点击</button>
//onClick = {this.handleClick.bind(this)}
)
}
}
- react中封装了不同类型的是事件（on*），事件的属性采用驼峰式命名，这些事件监听只能用在HTML标签上，不能用在组件标签中
- react中event对象是内部构建的，不需要考虑兼容性
- react中调用传入的方法时，不是通过对象发放的方式调用而是直接调用函数，在事件监听中无法通过this获取实例，应通过bind进行绑定
state & setState
- 进行状态的存储
class Hyy extends Component{
constructor(){
super();
this,state = {isClick:false}
}
hadleClick(){
this,setState(
isClick:! this.state.isClick
);
}
render(){
return(
<button onClick = {this,handleClick.bind(this)}>
{this,state.isClick? '未点击':'点击过'}
</button>
)
}
}
- 调用setState后，react.js进行更新state重新调用render重新渲染页面
- setState接受一个对象或者函数作为参数
- 进行多次的setState实际上只会渲染一次
配置组件 props
- 为组件添加配置属性
class Content extends Component{
construct(){
super()
this.state = {isClick:false}
}
hadleClick(){
this.setState(
isClick:!this.state.isClick
);
}
render(){
var clickText = this.props.message;
return (
<button onClick = {this.hadleClick.bind(this)}>
{this.state.isClick?clickText:"点击出现"}
</button>
)
}
}
class Title extends Component{
render(){
return(
<div>
<Content message = 'I ‘am fine ^ _ ^' />
</div>
)
}
}
- 在组件内部可以设置默认配置defaultProps
static defaultProps = {……}
- props的参数传入内部之后不能进行修改，但是可以通过父组件主动重新渲染传入新的props
state & props
- state是让组件自己控制自己的状态；props是外部对组件状态进行控制
- 有state的成为有状态组件反之为无状态组件
