一、react
1、元素渲染
（1）渲染元素
react会有一个根节点，如果是引入的react，则需要在不同的地方去定义react根节点。
通过reactDOM.render()将其dom节点渲染在页面上
const element = <h1>Hello, world!</h1>;
ReactDOM.render(
element,
document.getElementById('example')
);（2）更新元素
react元素被渲染后是不能够被更改的。唯一的方法是创建一个方法，放入到render中。
React 只会更新必要的部分
值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。
2、jsx
jsx是运行在js内部的
优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
缺点：
- jsx不能使用if else
const element = <h1>Hello, world!</h1>;
react表达式写在花括号 {}
react 推荐使用内联样式
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);3、组件
注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
const element = <HelloMessage /> 自定义组件
函数组件
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}类组件
在组件中必须实现render方法，在return中返回React对象
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}组件传递参数（props）
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
无状态函数式组件只带有一个render方法的组件类
- 不能被实例化、渲染性能快
- 组件不能访问this对象
- 组件不能访问生命周期方法
- 无状态组件只能访问props
区别：
- 编写形式
- 状态管理
- 生命周期
- 调用方式
- 获取渲染的值
useState()
userContext()
userReducer()
useEffect()
// 相当于componentDidMount生命周期
useEffect(() => {
console.log("Hello");
}, []);
// useEffect回调函数中return一个函数，则return函数会在组件卸载的时候执行，正如componentWillUnmount
React.useEffect(() => {
return () => {
console.log("Bye");
};
}, []);在使用hooks情况下，一般如果函数组件调用state，则需要创建一个类组件或者state提升到你的父组件中，然后通过props对象传递到子组件
调用方式：
函数组件：执行函数
类组件：实例化类，调用实例对象的render方法
4、state
react通过state实现用户的交互、页面的渲染（不操作dom）
在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。
我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。
5、props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变
子组件通过props来传递数据
6、事件处理
事件的方法需要绑定this，否则this为undefined。
绑定this三种方法：
handleClick = () => {
console.log('this is:', this);
}
<button onClick={this.handleClick}>
Click me
</button>
// bind
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
// 回调函数
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>7、条件渲染
（1）元素变量
通过元素变量判断是否显示或隐藏
（2）与运算符 &&
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 条未读信息。
</h2>
}
</div>
);（3）三目运算符
condition ? true : false
(4)防止组件渲染
if(test) {return null}
不会影响组件的生命周期的回调
8、组件api
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
setState
setState(object nextState[, function callback])
etState()总是会触发一次组件重绘
replaceState
replaceState(object nextState[, function callback])
方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
9、生命周期
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
10、ajax
11、表单事件
onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。
子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>12、refs
<input ref="myInput" />
可以通过ref获取组件的引用
也可以通过getDOMNode()方法获取DOM元素
13、列表&keys
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
