除识react

react 特点：

1.采用组件化模式、声明式编码，提高开发效率及组件复用旅

2.在 react Native 中可以使用react 语法进行移动端开发

3.使用虚拟dom + 优秀的dif算法，尽量减少与真实DOM 的交互

jsx语法规则：

在react中使用了jsx（JavaScript XML）语法，它类似于 XML的JS 扩展语法，本质是 React.create Element(component,props,...children)方法的语法糖

1.定义虚拟DOM时，不用写引号

2.标签中混入js表达式时要用{ }

3.样式的类名指定要用className

4.内联样式，要用style={{key: value}}的形式去写

5.只有一个根标签
6.标签必须闭合

7.标签首字母

若小写字母开头，则将转为 html 中同名元素，若html中没有，则报错
若大写字母开头，react 就会去渲染对应的对贱，若组件为定义，则报错

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法规则</title>
<style>
        .title {
background-color: orange;
width: 200px;
        }
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'HeLlo,rEaCt'

    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color: 'white', fontSize: '29px'}}>        
                {myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>  
                     {myData.toLowerCase()}
                </span>
            </h2>
            <input type="text"/>
        </div>
        )
//2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>
</body>
</html>

函数组件

//1.创建函数式组件

function MyComponent() {
　　console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
　　return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>;
 }

//2.渲染组件到页面

ReactDOM.render(<MyComponent />, document.getElementById("test"));

/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

　　1.React解析组件标签，找到了MyComponent组件。

　　2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

*/

类式组件

//1.创建类式组件
class MyComponent extends React.Component {
    render() {
        //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
        //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
        console.log("render中的this:", this);
        return (
            <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        );
    }
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />, document.getElementById("test"));
/*
    执行了ReactDOM.render(<MyComponent />.......之后，发生了什么？
    1.React解析组件标签，找到了MyComponent组件。
    2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
    3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/

state属性

1. state 状态必须通过setState进行更新，且更新是一种合并，不是替换

class MyComponent extends React.Component {
    // 简写
    // state = { name: '张三' }
    constructor(props) {
        super(props)
        //初始化状态
        this.state = { name: '张三',flag:false }
        // 简写
        this.changeName =this.changeName
        
        // 解决changeName中this指向问题,其实就是改变this指向
        // this.changeName = this.changeName.bind(this)
    }
    // 简写
    changeName=()=>{
        const {name,flag} =this.state;
        this.setState({name: flag?'张三':'历史',flag:!flag})
    }
    // changeName(){
　　　　　// 由于changName是作为 onClick 的回调，所以不是通过实例来调用，而是直接调用
　　　　　// 类中方法默认开启了局部的严格模式，同时应用了babel 所以changName 中的this 就为 undefined
        //const {name,flag} =this.state;

        //this.setState({name: flag?'张三':'历史',flag:!flag})
    // }
    render() {
        const {name} =this.state
        return (
            <h2 onClick={this.changeName}>{name}</h2>
        );
    }
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />, document.getElementById("tetx"));

　props　

1. props 是组件传过来的值，该值为对象

定义props内属性必传/默认值

class MyComponent extends React.Component {
    // 简写
    // 静态成员  类本身，而不是类的实例的成员
    // 对 标签属性进行类型，必要性的限制
    // static propTypes={
    //     name:PropTypes.string.isRequired,
    //     sex:PropTypes.string,
    //     age:PropTypes.number
    // }
    // // 指定默认标签属性的值
    // static defaultProps={
    //     sex:'未知',
    //     age:18
    // }
    render() {
        console.log(this.props,'this.props')
        const {name,sex,age} =this.props
        return (
            <ul>
                <li>{name}</li>
                <li>{sex}</li>
                <li>{age}</li>
            </ul>
        );
    }
}
MyComponent.propTypes={
    name:PropTypes.string.isRequired,
    sex:PropTypes.string,
    age:PropTypes.number
}
MyComponent.defaultProps={
    sex:'未知',
    age:18
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent name='张三' />, document.getElementById("tetx"));
ReactDOM.render(<MyComponent name='张三' sex='女' age={19}/>, document.getElementById("tetx2"));
// 报错
// ReactDOM.render(<MyComponent name={1} sex='女' age={19}/>, document.getElementById("tetx3"));

posted @ 2024-07-26 17:07 瑶开心阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

瑶开心

除识react

公告