├── .gitignore ├── README.md ├── highOrderComponent ├── Password.js ├── UserName.js ├── high.js └── index.js ├── react-redux.js ├── redux.js └── render.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react内部一些方法和原理的简易实现 2 | - ReactDOM.render方法简易实现 3 | - redux createstore简易版 4 | - redux combineReducers方法 5 | - 高阶组件的实现（达到组件复用的目的） 6 | - react-redux简易实现（基于react16.3 的context来实现的） 7 | -------------------------------------------------------------------------------- /highOrderComponent/Password.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import high from './high' 3 | 4 | class Password extends Component { 5 | render() { 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | } 13 | 14 | export default high('password')(Password) -------------------------------------------------------------------------------- /highOrderComponent/UserName.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import high from './high' 3 | class UserName extends Component { 4 | 5 | 6 | 7 | 8 | render() { 9 | return ( 10 |
11 | 12 |
13 | ) 14 | } 15 | } 16 | export default high('username')(UserName) -------------------------------------------------------------------------------- /highOrderComponent/high.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | let high=(key)=>(Component)=>{ 3 | return class HighOrderComponent extends React.Component{ 4 | state = {value: ''} 5 | componentWillMount() { 6 | let result = localStorage.getItem(key) 7 | this.setState({value: result}) 8 | } 9 | render(){ 10 | return 11 | } 12 | } 13 | } 14 | export default high; -------------------------------------------------------------------------------- /highOrderComponent/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import UserName from "./UserName"; 4 | import Password from "./Password"; 5 | 6 | ReactDOM.render(
7 | 8 | 9 |
,document.getElementById('root')) 10 | -------------------------------------------------------------------------------- /react-redux.js: -------------------------------------------------------------------------------- 1 | //{Provider,connect} 2 | import React from 'react' 3 | import {bindActionCreators} from 'redux' 4 | let {Provider:Pro,Consumer}=React.createContext(); 5 | //Provider 中有一个属性 store 6 | class Provider extends React.Component { 7 | render() { 8 | return 9 | {this.props.children} 10 | 11 | } 12 | } 13 | 14 | let connect = (mapStateToProps, mapDispatchToProps) => (Component) => { 15 | return class Proxy extends React.Component { 16 | render() { 17 | return ( 18 | 19 | {(store)=>{ 20 | console.log(store); 21 | // let state=mapStateToProps(store.getState()) 22 | // let actions=mapDispatchToProps(store.dispatch) 23 | // //状态变化后 需要更新视图 调用this.setState() 24 | // 25 | // return 26 | class High extends React.Component{ 27 | state=mapStateToProps(store.getState()) 28 | componentDidMount(){ 29 | console.log(this.state); 30 | this.unsub=store.subscribe(()=>{ 31 | this.setState(mapStateToProps(store.getState())) 32 | }) 33 | } 34 | componentWillUnmount(){ 35 | this.unsub(); 36 | } 37 | render(){ 38 | // let actions=mapDispatchToProps(store.dispatch) 39 | let actions; 40 | if(typeof mapDispatchToProps==='function'){ 41 | actions=mapDispatchToProps(store.dispatch) 42 | }else{//actions是对象 43 | actions=bindActionCreators(mapDispatchToProps,store.dispatch); 44 | } 45 | return 46 | } 47 | } 48 | return 49 | }} 50 | 51 | 52 | ) 53 | } 54 | } 55 | } 56 | export {Provider,connect} 57 | -------------------------------------------------------------------------------- /redux.js: -------------------------------------------------------------------------------- 1 | function createStore(reducer) { 2 | let state; 3 | let listeners=[]; 4 | let getState=()=>JSON.parse(JSON.stringify(state)); 5 | let dispatch=(action)=>{ 6 | state=reducer(state,action) 7 | listeners.forEach(listener=>listener()) 8 | } 9 | dispatch({}); 10 | let subscribe=(listener)=>{ 11 | listeners.push(listener); 12 | return ()=>{ 13 | listeners=listeners.filter(fn=>fn!==listener) 14 | } 15 | } 16 | return {getState,dispatch,subscribe} 17 | } 18 | function combineReducers(reducers) { 19 | return (state={},action)=>{ 20 | //默认要返回一个状态 21 | let obj={}; 22 | for(let key in reducers){ 23 | let reducer=reducers[key]; 24 | console.log(key,state,state[key]); 25 | let s= reducer(state[key],action) 26 | obj[key]=s; 27 | } 28 | return obj; 29 | } 30 | } 31 | export {createStore,combineReducers} 32 | -------------------------------------------------------------------------------- /render.js: -------------------------------------------------------------------------------- 1 | class Element{ 2 | constructor(type,props){ 3 | this.type=type; 4 | this.props=props; 5 | } 6 | } 7 | let React={ 8 | createElement(type,props,...children){ 9 | if(children.length===1){ 10 | children=children[0] 11 | } 12 | return new Element(type,{...props,children}) 13 | } 14 | } 15 | console.log(React.createElement("h1", {className: "red"}, "hello","jerry")); 16 | let ele=React.createElement("h1", {className: "red"}, "hello","jerry") 17 | function render(eleObj,container) { 18 | let {type,props}=eleObj; 19 | let ele=document.createElement(type); 20 | for(let key in props){ 21 | if(key!=='children'){ 22 | if(key==='className'){ 23 | ele.setAttribute('class',props[key]); 24 | }else{ 25 | ele.setAttribute(key,props[key]); 26 | } 27 | }else{//children 28 | let children=props[key]; 29 | if(Array.isArray(children)){ 30 | //是数组 31 | children.forEach(child=>{ 32 | if(child instanceof Element){ 33 | render(child,ele); 34 | }else{ 35 | //文本节点 36 | ele.appendChild(document.createTextNode(child)) 37 | } 38 | }) 39 | }else{ 40 | if(children instanceof Element){ 41 | render(children,ele); 42 | }else{ 43 | //文本节点 44 | ele.appendChild(document.createTextNode(children)) 45 | } 46 | } 47 | 48 | } 49 | } 50 | container.appendChild(ele) 51 | } 52 | render(ele,window.root) --------------------------------------------------------------------------------