React学习笔记

更新时间：2024-12-22 19:05:35 浏览数：2704 文章字数：10223 文章状态：已发布

React 一个构建用户界面的JavaScript库

React学习笔记：

React可以在node的服务端运行，也可以通过引入JS库的方式在浏览器渲染

以下为React目前学习的大致目录，如有遗漏，或者错误，欢迎大家补充和纠正

hello,world
应用结构
独创JSX模板语法
使用create-react-app创建默认程序
props
state
组件
生命周期
组件拆分
组件交互
react小应用：表格组件

1.hello,world

<body>
    <div id="root"></div>
</body>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.js"></script>
<script type="text/babel">
    function FunctionHelloWorld() {
        return <h1>hello,world</h1>
    }
    ReactDOM.render(<FunctionHelloWorld/>, document.getElementById('root'))
</script>

运行结果：

2.应用结构

根据上面的hello，world应用结构进行简单拆解

react应用组件

         react开发库：<script src="./js/react.development.js"></script>
         reactDom开发库：<script src="./js/react-dom.development.js"></script>
         babelJS：script src="./js/babel.js"></script>

其中react为react核心库，react-dom为react涉及dom操作部分

babel用于兼容JSX语法和ES5之后的语法转换为游览器兼容的JS语法

具体实现

    function FunctionHelloWorld() {
        return <h1>hello,world</h1>
    }
    ReactDOM.render(<FunctionHelloWorld/>, document.getElementById('root'))
</script>

内部代码使用babel解析，声明一个函数，返回一个包含内容为hello，world的h1标签，

最后调用ReactDOM.render函数将我们的helloworld函数组件，渲染到root元素节点下

3.独创JSX模板语法

JSX是React创建的语法全称JavaScript XML 允许直接在js中书写html元素，而不用通过繁杂的原生方法进行创建，能极大的提高提高js+html的混写效率

试试变量输出和数组输出，JSX语法的代码部分使用"{}"包裹起来，还能自动遍历数组，看h2的输出内容

但是"{}"本身在JS也有自己的语义，所以当我们需要使用到原生语义的时候，需要“{{a:1}}”使用双层包裹来表示内部定义是一个对象，而不是js代码块

如下：

<script type="text/babel">
    let testVar = '你好';
    let testArr = ['小明', '小黄', '阿花']
    function FunctionHelloWorld() {
        return (
            <div>
                <h1>{testVar}</h1>
                <h2>{testArr}</h2>
            </div>
        )
    }
    ReactDOM.render(<FunctionHelloWorld/>, document.getElementById('root'))
</script>