版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/samuelandkevin/article/details/89409068

JSX

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析

render 渲染内容的描述
通过Props传递数据 ,是一种从父级向子级传递数据的方法
给组件添加交互功能
构造器方法constructor
props和state的区别
添加反向数据流

1

注意:React元素都是immutable不可变的
ReactDOM管理节点内容
将元素渲染到 DOM 中:ReactDOM.render(element,节点)
更新元素渲染: 可以用定时器更新或者有态组件更新

2

组件可以将UI切分成一些独立的、可复用的部件
定义组件:
function Welcome(props) {
return

Hello, {props.name}

;
}

或者
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}

组件渲染:

生命周期钩子:

state使用

正确使用:setState()
this.setState({comment:‘Hello’});

状态更新可能是异步的,不能依靠this.props和this.state的值来计算下一个状态.

有状态组件和无状态组件

事件处理

onClick={} 表示事件的函数

<button onClick={activateLasers}>
Activate Lasers
</button>

不能使用返回的false方式阻止默认行为,用preventDefault
事件的监听不需要addEventListener,只需要这个元素初始渲染的时候提供一个监听器

构造器初始化bind

this.handleClick = this.handleClick.bind(this);

属性初始化器绑定回调函数:

handleClick = () => {
console.log('this is:', this);
}

性能问题:这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染
建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

条件渲染

与预算符&&
在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false

阻止组件渲染

列表&Keys

在定义key时,不建议使用索引来用作键值，因为这样做会导致性能的负面影响，还可能引起组件状态问题
用keys提取组件.

1.定义组件类
class 组件类名称 extends React.Component{
constructor(){

}
}

定义组件
function 组件1(){
return (

);
}

渲染
ReactDOM.render(component,id);

开发工具:

组件:
Board,