浅谈React

Posted 2020-11-20 fuguy

组件化

1. 组件的封装
2. 组件的复用

组件的封装

• 视图
• 数据
• 视图和数据之间的变化逻辑

import React, {Component} from ‘react‘;

export  default class List extends Component{
    constructor(props){
        super(props);
        this.state = { //数据
            list:this.props.data,
        }
    }
    render() { 
        return (
            <div> 
                <ul>
                    {this.state.list.map(function(item,index){
                        return (<li key={index}>{item}</li>);
                    })}
                </ul>
            </div>
        )
    }
}

 

组件的复用(通过props传递)

import React, {Component} from ‘react‘;
import List from ‘./list‘; //组件
import Title from ‘./title‘;//组件
export  default class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[‘Foo‘,‘Bar‘],
        }
    }
    todoList (item){
        this.state.list.push(item);
        const newList=this.state.list;
        this.setState({
            list:newList,
        })
    }
    render() {
        return (
           <div>
               <Title todoList={this.todoList.bind(this)} /> 
               <List data={this.state.list}/>
               <Title todoList={this.todoList.bind(this)} /> //复用
               <List data={[1,2,3]}/> //复用
           </div>
        )
    }
}

 

JSX

React引入JSX,并将它作为了一个独立的标准开放,React.createElement也是可以自定义去修改的,

jsx语法(语法糖)需要转成js

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

 

ReactElement createElement(  
  string/ReactClass type,  
  [object props],  
  [children ...]  
)  

　　

经过编译:转化成React.createElement,类似于vitual dom 的 h 函数

React.createElement(
  MyButton,
  {color: ‘blue‘, shadowSize: 2},
  ‘Click Me‘
)