核心概念:
- Babel会把JSX转义成一个React.createElement() 函数调用。
实际代码:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
React.createElement() 会预先执行一些检查,实际上是创建了一个对象。
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
这些对象被称为React元素。元素是构成React的最小砖块。元素是一个对象。
- 如何将React元素渲染成DOM?
想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render()
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
- 如何更新已渲染的DOM?
React元素是一个不可变的对象。就相当于是电影中的每一帧对应的都是不同的UI。所以按照我们之前将React元素渲染成DOM的方法,我们只有把新的React元素渲染到DOM节点中,传入ReactDOM.render() - React只更新它需要更新的部分
ReactDOM 会将元素和以及子元素和它之前的状态对比。 - 组件和props
5.1 组件相当于是UI的拆分,为了实现复用。就相当于一个函数,通过props(相当于参数)灌入数据,通过state维持自身状态。返回React元素。
5.2 props是只读的。
引入一个概念——纯函数 函数内部不会修改入参,并且多次传入相同入参返回的结果都是一样的。 state和生命周期
state是内部状态 是私有的
正确使用state:
6.1 不要直接修改state
6.2 state的更新是异步的
解决: 给state传入一个函数,还可以传一个回调函数this.setState((state, props) => ({ counter: state.counter + props.increment }));
6.3 state更新会被合并的
- 数据是向下流动的
- 列表和key
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。key需要在兄弟节点间是唯一的。而不是全局。
通常我们使用id来作为key,用索引来做key不太好。而且key的设定通常是数组最近的上下文。一个经验之谈就是在map数组的时候设置key - 表单
提一个概念,受控组件:向表单那样,数据源是react的state提供,每次输入过程中发送的操作也是react控制。输入的值始终由 React 的 state 驱动。
例如:
<form onSubmit={this.handleSubmit}>
<label>
名字:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="提交" />
</form>
- 生命周期 之前的版本
挂载
constructor
render
componentDidMount
更新
componentWillReceiveProps
shouldComponentUpdata
componentWillUpdata
render
componentDidUpdata
卸载
componentWillUnmount
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。