Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

英文技术文章阅读。 #15

Open
sl1673495 opened this issue Aug 12, 2019 · 13 comments
Open

英文技术文章阅读。 #15

sl1673495 opened this issue Aug 12, 2019 · 13 comments
Labels

Comments

@sl1673495
Copy link
Owner

sl1673495 commented Aug 12, 2019

https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
React + TypeScript 10个需要避免的错误模式。

https://medium.com/scrum-ai/4-testing-koa-server-with-jest-week-5-8e980cd30527
单元测试TypeScript + Koa的实践

https://kentcdodds.com/blog/profile-a-react-app-for-performance
React使用DevTools分析性能的一些注意事项

https://kentcdodds.com/blog/optimize-react-re-renders
React中优化组件重渲染,这里有几个隐含的知识点。

  1. React组件每次createElement,会生成一份新的props引用。
  2. 如果React在re-render中发现一个组件的type和props都保持了相同的引用,就会跳过这个组件的重渲染。
    这篇文章中提到的具体的优化策略是把
function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      <Logger label="counter" />
    </div>
  )
}

改成

function Counter(props) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      {props.logger}
    </div>
  )
}

然后把Logger组件的创建提到外层,而不要放在setCount会影响到的作用域下,这样logger组件就不会重新渲染了。

https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks
React Hooks的自定义hook中,如何利用reducer的模式提供更加灵活的数据管理,让用户拥有数据的控制权。

https://mariusschulz.com/blog/const-assertions-in-literal-expressions-in-typescript
TypeScript中的const常量声明和let变量声明的类型区别,以及as const的应用。

https:/piotrwitek/react-redux-typescript-guide#react---type-definitions-cheatsheet
React-Redux + TypeScript 的备忘录。

https:/typescript-cheatsheets/react-typescript-cheatsheet
React + TypeScript 进阶用法备忘录。

https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a
在项目中集成Prettier + ESLint + Airbnb Style Guide

https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857
在项目中集成ESLint with Prettier, TypeScript

@sl1673495
Copy link
Owner Author

sl1673495 commented Aug 12, 2019

https://kentcdodds.com/blog/when-to-break-up-a-component-into-multiple-components
何时应该把代码拆分为组件。

https://blog.logrocket.com/rxjs-with-react-hooks-for-state-management/
rxjs + hooks实现一个简单的聊天系统。

https://kentcdodds.com/blog/understanding-reacts-key-prop
在React中巧用key来控制组件的重新创建。

@sl1673495 sl1673495 changed the title 每日英文技术文章阅读。 英文技术文章阅读。 Aug 19, 2019
@sl1673495
Copy link
Owner Author

sl1673495 commented Aug 26, 2019

https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse
vue composition api 这部分主要讲述了Code Organization的改变,based on option type -> based on logical concern

@sl1673495
Copy link
Owner Author

sl1673495 commented Aug 28, 2019

https://vue-composition-api-rfc.netlify.com
vue composition api 阅读完成。

@sl1673495
Copy link
Owner Author

sl1673495 commented Sep 2, 2019

https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9
描述了组合比继承更好的地方。

“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work”

面向对象语言的问题在于它们带来了所有这些隐含的环境。
你想要一个香蕉,但你得到的是拿着香蕉和整个丛林的大猩猩。

@sl1673495
Copy link
Owner Author

https://nextjs.org/learn/basics/getting-started
nextjs官方文档的学习任务全部做完,包括基础和进阶。

@sl1673495
Copy link
Owner Author

https://medium.com/swlh/clean-up-redux-code-with-react-redux-hooks-71587cfcf87a
react-redux提供的hook让我们摆脱了connect高阶组件和很多样板代码,nice~

@sl1673495
Copy link
Owner Author

https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
在解决重渲染之前,先解决过慢的渲染。

@sl1673495
Copy link
Owner Author

https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster/
仔细思考你的React应用中,状态应该放在什么位置,是组件自身,提升到父组件,亦或是局部context和redux,这会有益于提升应用的性能和可维护性。

@sl1673495
Copy link
Owner Author

sl1673495 commented Oct 23, 2019

https://kentcdodds.com/blog/dont-sync-state-derive-it
仔细思考React组件中的状态应该如何管理,优先使用派生状态,并且在适当的时候利用useMemo、reselect等库去优化他们。

@sl1673495
Copy link
Owner Author

https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
在webpack构建的项目中实现css和js共享sass变量。

@sl1673495
Copy link
Owner Author

vuejs/rfcs#89
132提出了vue3中为何取消time slice的疑问,
尤雨溪从react和vue在原理层面的差异出发解释了这个问题。

@sl1673495
Copy link
Owner Author

https://stackoverflow.com/questions/28818849/how-do-the-different-enum-variants-work-in-typescript
ts官方团队的Ryan Cavanaugh回答关于ts中enum 和 declare enum的一些区别。

Remember the golden rule: Never declare things that don't actually exist
不要用declare去声明运行时不存在的东西。

@sl1673495
Copy link
Owner Author

https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
ts 泛型继承的分配 还需要进一步理解

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant