react 基础知识

野性酷女 2023-05-22 11:28 12阅读 0赞

1. 基础

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70][]

1. 官方文档和入门教程：[https://reactjs.org/][https_reactjs.org]  
    2. 官方核心概念和高级指引：[https://reactjs.org/docs/hello-world.html][https_reactjs.org_docs_hello-world.html]  
2. 配套知识  
    1. ES6入门教程：[https://es6.ruanyifeng.com/][https_es6.ruanyifeng.com]  
        1. ES5\\6\\7\\8到底是什么：[https://medium.com/@madasamy/javascript-brief-history-and-ecmascript-es6-es7-es8-features-673973394df4；JS?ES?：https://www.jianshu.com/p/e6132e71daee][https_medium.com_madasamy_javascript-brief-history-and-ecmascript-es6-es7-es8-features-673973394df4_JS_ES_https_www.jianshu.com_p_e6132e71daee]  
        2. babel基本原理：[https://segmentfault.com/a/1190000019578478][https_segmentfault.com_a_1190000019578478]  
        3. TS基础：[https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html][https_www.typescriptlang.org_docs_handbook_typescript-in-5-minutes.html]  
    1. 构建工具webpack入门：[https://segmentfault.com/a/1190000019244310][https_segmentfault.com_a_1190000019244310]；Grunt\\Gulp\\Webpack到底什么区别：[https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners][https_da-14.com_blog_gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners]  
    2. JavaScript设计模式基础：[https://www.w3cschool.cn/zobyhd/][https_www.w3cschool.cn_zobyhd]；函数式编程：[https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html][https_llh911001.gitbooks.io_mostly-adequate-guide-chinese_content_ch1.html]  
3. 核心原理  
    1. MVP\\MVC\\MVVM设计模式基础：[https://www.cnblogs.com/zhouyangla/p/6936455.html][https_www.cnblogs.com_zhouyangla_p_6936455.html]；深入一下MVX：[https://github.com/livoras/blog/issues/11][https_github.com_livoras_blog_issues_11]  
    2. react核心原理简介：[https://yuchengkai.cn/react/\#%E4%BB%8B%E7%BB%8D][https_yuchengkai.cn_react_E4_BB_8B_E7_BB_8D]；深入一下虚拟dom：[https://juejin.im/post/5cb66fdaf265da0384128445][https_juejin.im_post_5cb66fdaf265da0384128445]  
4. 新版本特性  
    1. HOC基础：[http://huziketang.mangojuice.top/books/react/lesson28][http_huziketang.mangojuice.top_books_react_lesson28]；Render props和hoc到底是啥：[https://www.jianshu.com/p/ff6b3008820a][https_www.jianshu.com_p_ff6b3008820a]  
    2. HOOKS基础：[https://reactjs.org/docs/hooks-intro.html][https_reactjs.org_docs_hooks-intro.html]；HOOKS设计原理：[https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba][https_medium.com_the-guild_under-the-hood-of-reacts-hooks-system-eb59638c9dba]  
3. 基础应用  
    1. 数据流管理-redux：[https://redux.js.org/][https_redux.js.org]；react-redux基础教程：[https://github.com/lewis617/react-redux-tutorial][https_github.com_lewis617_react-redux-tutorial]；react-redux源码阅读：[https://react-redux.js.org/][https_react-redux.js.org]  
    2. 不同的数据流思路 - redux-saga：[https://redux-saga.js.org/][https_redux-saga.js.org]；rxjs基础：[http://cn.rx.js.org/][http_cn.rx.js.org]；mobx基础：[https://mobx.js.org/][https_mobx.js.org]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: /images/20230521/324b8c5e8835486fa98850c38c0253fd.png
[https_reactjs.org]: https://reactjs.org/
[https_reactjs.org_docs_hello-world.html]: https://reactjs.org/docs/hello-world.html
[https_es6.ruanyifeng.com]: https://es6.ruanyifeng.com/
[https_medium.com_madasamy_javascript-brief-history-and-ecmascript-es6-es7-es8-features-673973394df4_JS_ES_https_www.jianshu.com_p_e6132e71daee]: https://medium.com/@madasamy/javascript-brief-history-and-ecmascript-es6-es7-es8-features-673973394df4%EF%BC%9BJS?ES?%EF%BC%9Ahttps://www.jianshu.com/p/e6132e71daee
[https_segmentfault.com_a_1190000019578478]: https://segmentfault.com/a/1190000019578478
[https_www.typescriptlang.org_docs_handbook_typescript-in-5-minutes.html]: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
[https_segmentfault.com_a_1190000019244310]: https://segmentfault.com/a/1190000019244310
[https_da-14.com_blog_gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners]: https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners
[https_www.w3cschool.cn_zobyhd]: https://www.w3cschool.cn/zobyhd/
[https_llh911001.gitbooks.io_mostly-adequate-guide-chinese_content_ch1.html]: https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
[https_www.cnblogs.com_zhouyangla_p_6936455.html]: https://www.cnblogs.com/zhouyangla/p/6936455.html
[https_github.com_livoras_blog_issues_11]: https://github.com/livoras/blog/issues/11
[https_yuchengkai.cn_react_E4_BB_8B_E7_BB_8D]: https://yuchengkai.cn/react/#%E4%BB%8B%E7%BB%8D
[https_juejin.im_post_5cb66fdaf265da0384128445]: https://juejin.im/post/5cb66fdaf265da0384128445
[http_huziketang.mangojuice.top_books_react_lesson28]: http://huziketang.mangojuice.top/books/react/lesson28
[https_www.jianshu.com_p_ff6b3008820a]: https://www.jianshu.com/p/ff6b3008820a
[https_reactjs.org_docs_hooks-intro.html]: https://reactjs.org/docs/hooks-intro.html
[https_medium.com_the-guild_under-the-hood-of-reacts-hooks-system-eb59638c9dba]: https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba
[https_redux.js.org]: https://redux.js.org/
[https_github.com_lewis617_react-redux-tutorial]: https://github.com/lewis617/react-redux-tutorial
[https_react-redux.js.org]: https://react-redux.js.org/
[https_redux-saga.js.org]: https://redux-saga.js.org/
[http_cn.rx.js.org]: http://cn.rx.js.org/
[https_mobx.js.org]: https://mobx.js.org/