Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muyunyun/cpreact
Build React from Scratch :tada:
https://github.com/muyunyun/cpreact
perfomance preact reactjs
Last synced: 3 months ago
JSON representation
Build React from Scratch :tada:
- Host: GitHub
- URL: https://github.com/muyunyun/cpreact
- Owner: MuYunyun
- License: mit
- Created: 2018-07-02T08:44:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T13:20:13.000Z (about 6 years ago)
- Last Synced: 2024-10-11T04:11:51.567Z (3 months ago)
- Topics: perfomance, preact, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.06 MB
- Stars: 33
- Watchers: 5
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README-zh_en.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/cpreact) 
This proj is aim to implement react from 0 to 1. In the meantime the develop experience is writen down as a series of articles as follow:
- [x] [前置准备](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/0.前置准备.md)
- [x] [JSX 和 Virtual DOM](https://github.com/MuYunyun/blog/issues/24)
- [x] [组件和 state|props](https://github.com/MuYunyun/blog/issues/25)
- [x] [生命周期](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/3.生命周期.md)
- [x] [diff 算法](https://github.com/MuYunyun/blog/issues/26)
- [x] [setState 优化](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/5.setState.md)
- [x] [ref 的实现](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/6.ref.md)
- [x] [PureComponent 的实现](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/7.PureComponent.md)
- [x] [HOC 探幽](https://github.com/MuYunyun/blog/blob/master/从0到1实现React/8.HOC探索.md)
- [ ] 事件机制探索
You can view the [release](https://github.com/MuYunyun/cpreact/releases) to find the corresponding code synced with the article.
### Useful Demos
There are some useful test cases from the develop experience. I've collected them as follow:
components
```js
class App extends Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
}
click() {
this.setState({
count: ++this.state.count
})
}
render() {
return (
Click Me!
{this.state.count}
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
```
state && props
```js
// this case is to know the attr in the jsx `` is converted to { a: 1, b: 2, c: 3 }
class A extends Component {
render() {
return (
{this.props.a + this.props.b + this.props.c}
)
}
}
class B extends Component {
render() {
const obj = { b: 2, c: 3 }
return (
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
```
life cycle
```js
class A extends Component {
componentWillReceiveProps(props) {
console.log('componentWillReceiveProps')
}
render() {
return (
{this.props.count}
)
}
}
class B extends Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
}
componentWillMount() {
console.log('componentWillMount')
}
componentDidMount() {
console.log('componentDidMount')
}
shouldComponentUpdate(nextProps, nextState) {
console.log('shouldComponentUpdate', nextProps, nextState)
return true
}
componentWillUpdate() {
console.log('componentWillUpdate')
}
componentDidUpdate() {
console.log('componentDidUpdate')
}
click() {
this.setState({
count: ++this.state.count
})
}
render() {
console.log('render')
return (
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
```
setState
```js
class B extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
this.click = this.click.bind(this)
}
click() {
for (let i = 0; i < 10; i++) {
this.setState({ // 在先前的逻辑中，没调用一次 setState 就会 render 一次
count: ++this.state.count
})
}
}
render() {
return (
增加
{this.state.count}
)
}
}
```
ref
```js
class A extends Component {
constructor() {
super()
this.state = {
count: 0
}
this.click = this.click.bind(this)
}
click() {
this.setState({
count: ++this.state.count
})
}
render() {
return
{this.state.count}
}
}
class B extends Component {
constructor() {
super()
this.click = this.click.bind(this)
}
click() {
this.A.click()
}
render() {
return (
)
}
}
```
PureComponent
```js
// 测试用例：验证 state 浅比较
class B extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: 0
}
this.click = this.click.bind(this)
}
click() {
const state = Object.assign({}, this.state)
this.setState({
count: this.state.count + 1,
})
}
render() {
return (
增加
{this.state.count}
)
}
}
// 测试用例：验证 props 浅比较
class A extends PureComponent {
render() {
return (
{this.props.count.number}
)
}
}
class B extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: { number: 1 }
}
}
click() {
this.setState({
count: { number: 1 }
})
}
render() {
return (
)
}
}
```
### Install
* Install with `yarn add cpreact`
* Then you can use it in your toy proj.(Not use in the production enviroment!!!)
### Thanks
Especially thank [simple-react](https://github.com/hujiulong/simple-react) for the guidance function of this library. At the meantime，respect for [preact](https://github.com/developit/preact) and [react](https://github.com/facebook/react)
If you want to contrubute this proj, you can read [how to pr](https://github.com/MuYunyun/cpreact/blob/master/.github/PULL_REQUEST_TEMPLATE.md). Thanks!