首先创建react编译环境 安装yarn
npm install -g yarn
通过脚手架创建项目如下
yarn create react-app react-learn
运行项目
yarn start
什么是JSX
- Facebook起草的JS扩展语法
- 本质是一个JS对象,会被babel编译,最终会被转换为React.createElement
- 每个JSX表达式,有且仅有一个根节点 最终会被转换为React.createElement只会创建一个虚拟dom对象
- React.Fragment <> </> 一样的效果 默认父级标签
- 每个JSX元素必须结束(XML规范)
- 注意: react创建的元素对象不可以绑定事件 不是真真的dom
-
<li>9</li> <img src="" /> //必须要有结束 XML规范
在JSX中嵌入表达式
- 在JSX中使用注释 使用js注释 /* */
- 将表达式作为内容的一部分
import React from 'react'; import ReactDOM from 'react-dom'; // import './index.css'; const a = 123, b = 234; //这是一个react元素对象 const span = <span>nihao</span> //这是一个普通对象 const obj = { name:'taotao' }; const arr = [2,3,4]; // var li = ( // <div > // <li>9</li><li></li><li></li><li></li> // </div> // ); // var li = ( // <div > // {a} + {b} = {a + b}; // </div> // ); //arr 数组可以作为表达式写入 会遍历数组每一位 //react元素对象也可以 //普通对象不行 无法解析 var li = ( <div> {arr} ---{span} ---{obj} </div> ); //底层实现如下 // var li = React.createElement('li', {},`${a} + ${b} = ${a + b}`); console.log(li) ReactDOM.render(li, document.getElementById('root'));
- null、undefined、false不会显示 显示它们{ } 中要使用字符串
- 普通对象,不可以作为子元素
- 可以放置React元素对象
- 将表达式作为元素属性
- 属性使用小驼峰命名法
-
const number = new Array(30); number.fill(9); const list = number.map((ele,index) => { //对于属性的名字使用小驼峰式法则 规则如下 return <li style={{color:"white", width:"100px", height:"20px", background:'black'}} className="ooo" key={index}>{ele}-- {index}</li> }) ReactDOM.render(list, document.getElementById('root'));
- 防止注入攻击
-
const context = "<div>123</div>"; //当创建的react变量中字符串含有html标签时 会将其解析为innerHtml文本 而不是标签 // 如果真的要插入标签要用一下格式 添加属性要以对象格式 将会被强制解析为dom结构 const list = ( <div dangerouslySetInnerHTML={{ __html:context }}> </div> ) ReactDOM.render(list, document.getElementById('root'));
- 自动编码
- dangerouslySetInnerHTML 强制解析字符串为dom 要以对象形式 对象写入表达式{ { __html:context } }
元素的不可变性
- 虽然JSX元素是一个对象,但是该对象中的所有属性不可更改
- 如果确实需要更改元素的属性,需要重新创建JSX元素
-
重新渲染并不是想象中的消耗性能 因为react操作的是元素对象 并非dom 实际上相当效率高 重新渲染只是改变内容 dom不改变let list = 3; setInterval(() => { list++; const div = ( <div>{list}</div> ); // 会报错 该对象中的所有属性不可更改 相当于将对象冻结 // 如果要改变只能重新渲染 ReactDOM.render(div, document.getElementById('root')); // console.log(div.props.children); },0)