## element react中`element`是不可能更改的，它就像是电影中静止的一帧。一旦你创建一个`element`，你就不能再修改它的`attributes`和`children`。 ``` function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); ``` 一个`React element`能够代表不止一个的`dom 元素`。 ract值会渲染被改动的dom元素，而不是整个`element`都被重新渲染。 ## Component 概念上，组件就像是Javascript 中的函数，可以接收任意的输入（我们称之为`props`）并且能够返回`React elements`作为返回值来描述我们需要在屏幕上显示的真实DOM。 一个`JSX tag` 可以代表一个dom标签，但也能代表一个用户自定义的组件。 调用函数 --vs-- 调用组件 ```javascript let data = { author:{} ,date:'' ,text:'' } //把data中的所有属性一一传递给Comment ReactDOM.render(<Comment {...data}/>,document.getElementById('root')); ``` All React components must act like pure functions with respect to their props. ## 组件的运行方式 1. render发现一个用户自定义组件，如果标签名是以大写字母开头就是用户自定义组件，如果小写字母开头就是DOM组件 2. 普通的dom jsx元素是不能被识别的，如果你想渲染一个react组件，请用大写字母开头 3. 先把jsx属性封装成一个props对象，{name:'ahhh',age:'8'} 4. 把它作为参数传递给Welcome函数，获取到一个返回值，返回值是一个React元素 5. render方法会把此react元素渲染到页面上 ### 函数式组件和类组件 ``` //function function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //class class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render(<Welcome name='ahhh' age='123'/>,document.getElementById('root')); ``` 上面两种方式是等价的，但类组件还有些特点，它能支持`state`状态 ## 什么样的适合封装成一个组件 当你的react 经常被重复利用或则说足够复杂 ## state ### 什么样的pops适合被设置成状态 If you don’t use something in render(), it shouldn’t be in the state. ### setState() ### State Updates May Be Asynchronous ``` this.setState((prevState,props)=>({counter:prevState.counter + Math.random()})); this.setState((prevState,props)=>({counter:prevState.counter + props.increment})) ``` ### State Updates are Merged