React[0]

起源于facebook开源项目

用于构建用户界面的js库

生态很好

使用jsx构建组件化开发,使用函数式UI编程

使用diff算法、虚拟DOM性能高

虚拟DOM

把真实的DOM节点变成内存中的DOM树,我们就只需要操作内存中的DOM,最后一次渲染成真实的DOM,修改的时候状态机发生改变,React只会重新渲染不同的DOM节点

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="./js/react/umd/react.development.js"></script>
    <script src="js/react-dom/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script type="text/babel"> //高阶语法转化成低阶语法
    //获取页面真实元素容器
    const containerDiv=document.getElementById('app');
    //JSX语法 创建虚拟DOM对象
    const vDOM=<div>Hello World!</div>;
    //渲染(将内存中的虚拟DOM渲染到页面上)
    ReactDOM.render(vDOM,containerDiv);
</script>
</body>
</html>

安装react developer tools (chrome插件)

JSX语法

最终运行的时候还是会把JSX语法转化成低版本的JS语法

添加标签

<script type="text/babel">
    const vDOM=<span className={'myClass'}>{'hi'}</span>;
    ReactDOM.render(vDOM,document.getElementById('app1'));
</script>

webstorm live templates 好用~


标签嵌套

反正最后只能传一个标签进去

ReactDOM.render(
    <div>
    <div>
        <h2>标签嵌套</h2>
    </div>
        <img src="./img/62289173_p0.jpg" width="600"/>
        <p> 测试</p>
    </div>
        ,document.getElementById('app'));

表达式和变量

要写在大括号里

const str ='123';
    ReactDOM.render(
    <div>
        <h2>{str}</h2>
        <h3>{1+1}</h3>
    </div>
        ,document.getElementById('app'));

内联样式通过对象方式引入

const some_css={
        backgroundColor:'purple',
        color:'yellow',
        fontSize:30
    };

    ReactDOM.render(
        <div>
            <div>
                <h2>标签嵌套</h2>
            </div>
            <img src="./img/62289173_p0.jpg" width="600"/>
            <p style={some_css}> 测试</p>
        </div>
        ,document.getElementById('app'));

数组遍历

const myArr=[
        {name:'cc_dragon',age:19},
        {name:'jie_brother',age:20},
        {name:'pao_king',age:22},
    ];
//创建虚拟DOM
    const vDOM=
        (<ul>
                {
                    myArr.map((data,index)=>
                        <li key={index}>{index+1}----name: {data.name}----age:{data.age}</li>
                )
                }
        </ul>
        );
    ReactDOM.render(vDOM,document.getElementById('app'));

总结

  • JSX className代替class
  • 单标签必须自闭合
  • {}中可以写JS代码(只能是表达式)
  • 注释{/*123*/}

React组件化和模块化

多个组件形成模块

创建组件

function Ccdragon() {
        return(
            <div>

                <h2>
                    HI CCDragon
                </h2>
                <img src="img/62289173_p0.jpg" width="300"/>
            </div>
        );
    }
    ReactDOM.render(
        <Ccdragon/>,
        document.getElementById('app')
    );

传递参数

function Ccdragon(props) {
        return(
            <div>

                <h2>
                    HI,{props.name}
                    {props.gender}
                    <br/>
                    {props.lan}
                </h2>
    <img src="img/62289173_p0.jpg" width="300"/>
    </div>
    );
    }
    ReactDOM.render(
        <Ccdragon name={'ccdragon'} gender={'male'} lan={['h5','es6','PHP']} />,
        document.getElementById('app')
    );

多个组件复合成一个

function Gender(props) {
        return <li>{props.gender}</li>
    }
    function Name(props) {
        return <p> {props.name}</p>
    }
    function Lan(props) {
        return <p> {props.lan}</p>
    }
    function Ccdragon(props) {
        return(
            <div>
                <Name name="hi"/>
                <Gender gender={"male"}/>
                <Lan lan={['php','js']}/>
            </div>
        )
    }
    ReactDOM.render(<Ccdragon/>,document.getElementById('app'));

class 创建组件

class Ccdragon extends React.Component{
        render(){
            return(
                <div>

                    <h2>
                        HI,{this.props.name}
                        {this.props.gender}
                        <br/>
                        {this.props.lan}
                    </h2>
                    <img src="img/62289173_p0.jpg" width="300"/>
                </div>
            );
        }
    }
ReactDOM.render(<Ccdragon name={'132'} gender={'male'} lan={['php','js']}/>,document.getElementById('app'));

通过函数创建的组件叫无状态组件,通过类创建的组件叫有状态组件

状态(state)

React把组件看成状态机,通过状态的改变来实现界面的改变

//组建类
    class CCDragon extends React.Component{
        constructor(props){
            super(props);
           //初始化状态
           this.state={
               name:'ccdragon',
               gender:'male',

           }
        }

        render() {
            const {name,gender}=this.state;
            return (
                <div>
                    <h2>我是{name},性别:{gender}</h2>
                    <button onClick={()=>this.dealClick()}>换一个</button>
                </div>
            );
        }
        dealClick(){
            this.setState({
                name:'kksk',
                gender:'female',
            })
        }

    }
//渲染
    ReactDOM.render(<CCDragon/>,document.getElementById('app'));

props和state混用


为什么要写 constructor(props){ super(props);

https://overreacted.io/zh-hans/why-do-we-write-super-props/


class CCDragon extends React.Component{
    constructor(props) {
        super(props);

        //初始化state
        this.state={
            age:1,
            dragon_friend:[],
        };


    }
    //设置props属性默认值
    static defaultProps= {
        name: 'Ccdragon',
        gender: 'male',
    };
    render(){

        const {age,dragon_friend}=this.state;
        const {name,gender}=this.props;
        return(
            <div>
                <p>name:{name},gender:{gender}</p>
                <p> 今年{age}岁了</p>
                <p>I have friends:</p>
                <ul>
                    {dragon_friend.map((dragon_friend,index)=>
                        <li key="index">
                            {dragon_friend}
                        </li>)}
                </ul>
                <button onClick={()=>this.addYear()}>
                    grow up
                </button>
            </div>
        )
    }
    addYear(){
        let tmpArr=this.state.dragon_friend;
        tmpArr.push('friend'+
            Math.floor(Math.random()*100)
        );
        this.setState({
            age:this.state.age+1,
            dragon_friend:tmpArr,
            }
        )
    }
}
ReactDOM.render(<CCDragon/>,document.getElementById('app'));

props在单个组件中只读,state可以改变

props属性设置

先要引入prop-type.js

static propTypes={
        name:PropTypes.string,
        gender:PropTypes.string
};

refs

class CustomTextInput extends React.Component{
        constructor(props) {
            super(props);
                //绑定ref
            this.myInput=React.createRef();
        }
        render(){
            return (
                <div>

                    <input ref={this.myInput}   type="text" placeholder="请输入内容"/>
                    <input type="button" value="获取焦点" onClick={()=>this.focusTextInput()} />
                </div>
            )
        }
        focusTextInput(){
            // console.log(this.myInput);
            this.myInput.current.focus();//获取焦点
        }

    }
ReactDOM.render(
    <CustomTextInput/>,document.getElementById('app')

);

发表评论

电子邮件地址不会被公开。 必填项已用*标注