Open iidear opened 5 years ago
Preact 的作者写过一篇文章解释 jsx,可以说很清晰了。
const element = <h1 className="greeting">Hello, jsx!</h1>
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, jsx!'
)
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, jsx!'
}
}
大写字母开头的元素会解释为 组件,小写字母开头的解释为普通 html 元素
const com = <Com>hello</Com>;
// 等价于
const com = React.createElement(Com, null, 'hello');
Babel 提供了在线转译的编辑器 。
const element = <h1>hello, react!</h1>;
const root = document.getElementById('root');
ReactDOM.render(element, root);
element 是一个 VNode (js对象),root 是一个 DOM Node。
ReactDOM.render 方法会将 element 表示的内容更新到 DOM 中。
使用 diff 算法,只更新必要的部分,尽可能地减少 DOM 操作。
// 不推荐,每次 button 被渲染时会重新创建一个回调函数。
// 如果被传递到子组件,可能会导致额外的重渲染
// https://stackoverflow.com/questions/50421483/take-the-example-of-the-handling-events
const btn = <button onClick={() => this.submit.bind(this, data)}>submit</button>
// 推荐 const btn = <button onClick={this.submit.bind(this, data)}>submit
https://zh-hans.reactjs.org/docs/react-api.html
组件
React 元素
DOM、组件实例相关(ref)
React 元素工具方法
性能优化
其他
Hooks
ReactDOM
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
派生 state 即数据来自外部的 state(跟随 props 变化的 state).
处理方式:
优化方式:
https://pomb.us/build-your-own-react/
https://reactjs.org/docs/hello-world.html