React介绍2，了解看看
1.更新元素渲染
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：
来看一下例子
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);
以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()，我们可以将要展示的部分封装起来，以下实例用一个函数来表示：
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);
2.除了函数外可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props：
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);
React 只会更新必要的部分，值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分
使用 ES6 类写法，用 this.props.属性名 来取值。
2. 可以多层 props 来传值，在 ReactDOM.render 定义属性值，传给调用方法 App，再在调用的ES6类调用中用 props.属性直接赋值过去。多个属性的传入注意不用逗号或分号隔开而是空格符隔开
var myStyle = {color:'red',textAlign:'center'}
class Name extends React.Component {
render() {
return <h1 style={myStyle}>网站名称：{this.props.name}</h1>;
}
}
function App(props) {
return (
<div>
<Name name={props.name}/>
</div>
);
}
ReactDOM.render(
<App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
document.getElementById('example')
);
5.React使用 JSX 来替代常规的 JavaScript, JSX 是一个看起来很像 XML 的 JavaScript 语法扩展, 不需要一定使用 JSX, 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML, 它被称为 JSX， 一种 JavaScript 的语法扩展。JSX 是在 JavaScript 内部实现的。
但它有以下优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化,它是类型安全的，在编译过程中就能发现错误, 使用 JSX 编写模板更加简单快速, JSX是用来声明 React 当中的元素
注意:由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性
嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀
ReactDOM.render(
<div>
<h1>a1</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">hello</p>
</div>,
document.getElementById('example')
);
js文件的
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
6.在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
