React学习(一) JSX及元素渲染

JSX

全称为JavaScript XML，字面意思就是在JS中写XML（HTML）格式的代码

原理是利用了babel将JSX编译为使用react.createElement()，react本身也是使用这个方法插入节点，但其代码结构非常繁琐，不够直观优雅。使用JSX可以像写html一样写结构，结构直观也提高开发效率。

<div className="shopping-list">
	<h1>Shopping List</h1>
	<ul> 
		<li>Instagram</li>
		<li>WhatsApp</li>
	</ul>
</div>

使用

（1）使用JSX创建react元素

const title = <h1>Hello JSX</h1>

（2）使用ReactDOM.render()渲染react元素到页面中

ReactDOM.render(title,
               document,getElementById('title'))
//需要在html页面中添加一个id="title"的div，将title内的react元素放到div中。

顺便提一下这个方法

ReactDOM.render(<App/>,div)

这是react的渲染方法，他有两个参数，内容和渲染目标js对象,

他有一个作用相反的方法，它用于清空一个渲染目标中的react组件或html

ReactDOM.unmountComponentAtNode(div)

注意

1. React元素的属性名使用驼峰命名法
2. 特殊属性名：class=>className、for=>htmlFor、tabindex=>tabIndex
3. 没有子节点的React元素可以用 />结束
4. 推荐使用小括号包裹JSX，从而避免js中的自动插入分号陷进

渲染

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

（1）要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo"/>
ReactDOM.render(myDivElement, document.getElementById('example4'));

（2）要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});//创建的组件
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example5'));

（3）使用三元表达式实现条件渲染

let isTrue = 1
ReactDOM.render(
<h1>{isTrue == 1 ? 'True':'FALSE'}</h1>
,document.getElementById('root')
)

（4）使用内联样式（也可以通过className来设置 推荐className）

let myStyle = {
          fontSize : 22,//是fontSize 不能是font-size
          color : '#FF00BB'
      }
  
ReactDOM.render(
<h1 style={myStyle}>我会是什么颜色呢</h1>
,document.getElementById('root')
)

6）列表渲染

使用数组的map()来渲染一组数组

注意！！！

渲染列表时应该添加key属性，key属性的值要保证唯一（同vue的原理，虚拟dom和diff算法的原因，如果有破坏顺序的操作，使用默认的index值会重新从头渲染）

const songs = [
    { id: 1, name: '我是111' },
    { id: 2, name: '我是222' },
    { id: 3, name: '我是333' }
]
// 2 创建react元素
const title = (
    <ul>
        {
            songs.map(item => {
                return (
                    <li key={item.id}>{item.name}</li>
                )
            })
        }
    </ul>
)