2020-08-07

React元素渲染：
将react元素渲染到根DOM节点中，我们可以通过ReactDOM.render()的方法来将其渲染。

Const element =

Hello,world!

;
ReactDOM.render(
Element,
Document.getElementById(“example”)

更新元素渲染（React元素是不可变的），当元素被创建之后，无法改变其内容或属性，目前唯一更新界面的唯一方法是创建一个新的元素，然后将他传入ReactDOM.render()方法中。
Jsx的优点：1.jsx执行更快，因为它在编译为javascript代码后进行了优化；她的类型是安全的，在编译过程中就能发现错误；使用jsx编写模板更加简单快捷如：const element=

Hello,world!

;
State和props的主要区别在于props是不可变的，而state可以根据与用户交互来改变的。
默认props：通过组件类的defaultProps属性为props设置默认值，示例如下：

class HelloMessage extends React.Component { render() { return (

Hello, {this.props.name}

); } } HelloMessage.defaultProps = { name: ‘Runoob’ }; const element = ; ReactDOM.render( element, document.getElementById(‘example’) );

React事件处理和DOM元素类似，但是有一点语法上的不同：
React事件绑定的命名采用驼峰式写法，而不是小写。
如果采用JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）
React组件API:
1.设置状态：setState （是React时间处理函数中和请求回调函数中触发UI更新的主要方法）
setSate(object nextState[, function callback])
参数说明：nextState将要设置的新状态，该状态会和当前的state合并；callback可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
关于setState
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
2.替换状态：replaceProps
replaceState(object nextState[,function callback])
nextState将要设置的新状态，该状态会替换当前的state.
Callback,可选参数，回调函数。该函数会在replacestate设置成功，且组件重新渲染后调用。
3.设置属性：setProps
setProps(object nextProps[,function callback])
nextProps将要设置的新属性，该状态会和当前的props合并
Callback,可选参数，回调函数。该函数会在replacestate设置成功，且组件重新渲染后调用。
Props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的javascript应用集成时，我们可能会需要向组件传递数据或通知React.render(0组件需要重新渲染，可以使用setProps()。
4.替换属性：replaceProps
replaceProps(object nextProps[,function callback])
nextProps将要设置的新属性，该属性会替换当前的props.
Callback可选参数，回调函数，该函数会在replaceProps设置成功，且组件重新渲染后调用。
replaceProps()方法与setProps类似，但它会删除原有 props。
React组件生命周期分为三种状态：1.Mounting:已插入真实DOM;2.Updating:正在被重新渲染；3.Unmounting:已移出真实DOM
React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
将函数组件转换成class组件的步骤：
1.创建一个同名的es6 class,并且继承于React.Component.
2.添加一个空的render()方法
3.将函数体移动到render()方法之中
4.在render()方法中使用this.props替换props
5.删除剩余的空函数声明
我们通过以下三步将date从props移动到state中：
1.把render()方法中的this.props.date替换成this.state.date
2.添加一个 class 构造函数，然后在该函数中为 this.state 赋初值：
3.移除 元素中的 date 属性
向事件处理程序传递参数：
在循环中，通常我们会为事件函数传递额外的参数。例如，若id是你要删除那一行的ID，以下两种方式都可以向事件处理函数传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row<button onClick={this.deleteRow.bind(this, id)}>Delete Row
上诉两种方式是等价的，分别通过箭头函数和Function.prototype.bind实现
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。