React学习笔记（一）

JSX

一、基本使用

1、createElement 方法过于繁琐，例如：

React.createElement("div", {id: "d1", className: "item"},
                    React.createElement("ul", null,
                    React.createElement("li", null, "ok"),
                    React.createElement("li", null, "yes"),
                    React.createElement("li", null, "no")))

缺点：繁琐、不直观、不优雅、体验感差

2、 JSX：

<div id="d1" class="item">
    <ul>
        <li>ok</li>
        <li>yes</li>
        <li>no</li>
    </ul>
</div>

（1）JSX: javaScript xml

（2）JSX是 React 的核心内容

（3）使用JSX创建 React 元素：

const title = <h1>123</h1>

（4）原理：babel进行编译，转成js对象，用 ReactDOM.render()  方法将这个对象转成DOM元               素，最后插入页面

3、注意

（1）JSX不是ES的标准语法，它是ES的扩展

（2）需要使用babel编译处理后才能在浏览器环境中使用

（3）编译JSX的包：@babel/preset-react

（4）React 元素的属性名使用驼峰命名法

（5）如果元素没有子节点，可直接使用单标签，但是以  /> 结尾

（6）可以使用（）包裹JSX，以避免一些问题

二、JSX 中使用js表达式

语法：{JS表达式}

例如：

let ok = 123;
const text = (
    <p>{ok}</p>
)

三、条件渲染

可以使用 if 三元运算符、逻辑运算符，例如：

let is = true;
const ok = () => {
    if(is) return (
        <div>我是叮叮当</div>
    )
    return (
        <div>叮叮当在哪里</div>
    )
}

四、列表渲染

使用数组的 map 方法， 例如：

 const books = [
        { id: 1, name: '西游记', author: '吴承恩' },
        { id: 2, name: '水浒传', author: '施耐庵' },
        { id: 3, name: '红楼梦', author: '曹雪芹' },
        { id: 4, name: '三国演义', author: '罗贯中' },
    ]
    const list = (
        <ul>
            books.map(item => 
            <li key={item.id}>
                书名：{item.name},作者：{item.author}
            </li>)
        </ul>
    )

五、样式处理

1、行内样式 style

const title = <h1 style={{ width: '20px', height: '20px'}}>你好</h1>

注意：这不是俩组花括号，外边代表的是js，里边代表的是对象

2、类名 className (推荐)

需得使用import导入样式表

React 完全利用JS语言自身的能力来编写UI，而不是增强HTML功能。