📑 前端 Node-sass 无法下载问题

Q: node-sass issue:

$ yarn add node-sass --unsafe-perm
$ npm install node-sass --unsafe-perm

Q: master branch and ‘origin/master’ have diverged, how to ‘undiverge’ branches’?

$ git pull --rebase origin master

也可以通过配置 yarn 国内镜像来解决：

1. NPM

$ npm config set registry http://registry.npm.taobao.org
$ npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

2. YARN

$ yarn config set registry http://registry.npm.taobao.org
$ yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

3. 全局：

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

📑 用 strftime 配置 log:

console.log(
	strftime("%H:%M:%S") +
		" | " +
		req.method +
		" -> " +
		req.baseUrl +
		" -> " +
		JSON.stringify(req.query)
);

You don’t need the body-parser middleware, you need the raw req stream.

• gateway server 只是代理，不做处理，所有不需要body-parser.

📑 express, router

var router = express.Router([options]);

options -> strict: 启用严格路由。 默认情况下禁用，“/foo”和“/foo/”由路由器处理相同。

📑 dotenv, localenv

• 优先~/.bash_profile 中的 export
• .env 有效

require('dotenv').config();
process.env...

• .env.local

require('localenv').config();
process.env...

• ‘.env’ should be committed
• A way to override variables in ‘.env’ by ‘.env.local’ (which shouldn’t be committed)

.env files should be checked into source control (with the exclusion of .env*.local).

📑 component types

1. State-full or class-based components
2. State-less or function-based components
3. Presentational (or high-order) components
4. Container components

📑 Data-Down, Actions-Up

Best Practices List

1. When using ReduxJS, split your Reducer code into smaller methods to avoid huge JSON within your Reducer.
2. Consider using TypeScript in your apps if you do not do it already.
3. Use the create-react-app generator to bootstrap your ReactJS app.
4. Keep your code DRY. Don’t Repeat Yourself, but keep in mind code duplicate is NOT always a bad thing.
5. Avoid having large classes, methods or components, including Reducers.
6. Use more robust managers to manage application state, such as Redux.
7. Use event synchronizer, such as Redux-Thunk, for interactions with your back end API.
8. Avoid passing too many attributes or arguments. Limit yourself to five props that you pass into your component.
9. Use ReactJS defaultProps and ReactJS propTypes.
10. Use linter, break up lines that are too long.
11. Keep your own jslint configuration file.
12. Always use a dependency manager with a lock file, such as NPM or yarn.
13. Test your commonly accessed code, code that is complex and prone to bugs.
14. Write more tests that give more test coverage for your code with a little effort and test code to ensure its proper functioning.
15. Every time you find a bug, make sure you write a test first.
16. Use function-based components by starting to use React Hooks, a new ReactJS way to create state-full components.
17. Use ES6 de-structuring for your props.
18. Use conditional rendering.
19. User map() to collect and render collections of components.
20. Use partial components, such as <> … </>
21. Name your event handlers with handle prefixes, such as handleClick() or handleUpdate().
22. Use onChange to control your inputs, such as onChange={this.handleInputChange()}.
23. Use JEST to test your ReactJS code.

📑 Server-side import

Tried but not work. node-pre-gyt dependency @babel version 6.26.3 which not supported by babel-register.

Except import, es6 other features like destruct, arrow function all work.

📑 How to access DOM?

// or a ref setter function
const ref = React.createRef();
// render
<Button ref={ref} />;
// usage
const element = ref.current;

class AccordionWrapper extends Component {
	state = { title: "" };
	ref = React.createRef();
	handleTitle = (title) => {
		this.setState({ title });
	};
	render() {
		return (
			<Accordion title={this.state.title} isOpen>
				<Amendments ref={this.ref} handleTitle={this.handleTitle} />
			</Accordion>
		);
	}
}

🪕HOC

const withHideLoading = (BaseComponent) =>
  (props) => (
  {props.loading &&
  <BaseComponent />}
)

const ButtonWithLoading =
  withHideLoading(<SubmitButton
    label="Submit"
  />)

<ButtonWithLoading loading={true} />

const withDisabledState = withState("disabled", "setDisabled", false);
const withDisabledOnSubmit = withHandlers({
	onSubmit: ({ setDisabled }) => () => setDisabled(true),
});

const SubmitButton = ({ label, onSubmit, disabled }) => (
	<input type="submit" disabled={disabled} value={label} onClick={onSubmit} />
);

const ButtonWithDisable = compose(
	withDisabledState,
	withDisabledOnSubmit
)(<SubmitButton label="submit" />);

class HorizontalSplit extends React.Component {
	shouldComponentUpdate() {
		return false;
	}

	render() {
		<FlexContainer>
			<div>{this.props.leftSide}</div>
			<div>{this.props.rightSide}</div>
		</FlexContainer>;
	}
}

return React.Children.only(this.props.children);

React.Children.only(
	React.cloneElement(this.props.children, { editor: this.editor })
);

🪕 Hooks

• Refs provide a way to access DOM nodes or React elements created in the render method.
• Instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it.
• useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
• the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example side effects belong in useEffect, not useMemo.
• everytime state changes, function will re-exectue, so use useMemo, useCallback to prevent state changes.
• useEffect(func, [denpendencies]) (if dependencies=obj{}, using useMemo to cache )

	Array.from( new Set(repeated_array) )
	[ ...new Set(repeated_array) ]

📑 useRef

• useRef will give you the same ref object on every render.

• useRef not render when change, completely separate to component function.

  • access dom
  • persist values across renders without causing re-rendering.
• forwardRef