本篇文章主要的介绍了关于react的安装步骤，还有关于react的特点和概念的解释，下面就让我们一起来看这篇文章吧
一 React
1. 概念
React 是一个用于构建用户界面的 javascript 库。 React主要用于构建UI，是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单。
2. 特点
高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活−React可以与已知的库或框架很好地配合。JSX− JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用它。组件− 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。单向响应的数据流− React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。(Redux)
3. [安装] (https://doc.react-china.org/docs/installation.html)
yarn init yarn add react react-dom react-scripts
package.json
{ "name": "test", "version": "1.0.0", "description": "zzz", "main": "index.js", "license": "MIT", "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "^1.0.17"
}, "scripts": { "start": "react-scripts start"
}
}4. 组件
1. ES6 class
class Welcome extends React.Component {
render() { return ( <h1> Hello, {this.props.name} </h1>
)
}
}
class App extends React.Component {
render() {
return ( <p>
<Welcome name = "zhz1" />
<Welcome name = "zhz2" />
<Welcome name = "zhz3" />
</p>
)
}
}2. 函数式 (无状态组件)
function Welcome(props) {
return <h1> Hello, {props.name} </h1>}
function App() {
return ( <p>
<Welcome name = "zhz1" />
<Welcome name = "zhz2" />
<Welcome name = "zhz3" />
</p>
)
}3. ES5-写法 React.createClass(仅做参考)
React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
const Welcome = (props) => { return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
render() {
return ( <p>
<Welcome name1 = "ss" />
<Welcome name1 = "zhz2" />
<Welcome name1 = "zhz3" />
</p>
)
}
});导出(提供接口) export default App
5. Props 属性
6. State 状态
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）（想看更多就到PHP中文网React参考手册栏目中学习）
class Welcome extends React.Component {
render() { return ( <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
)
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
selected: false
}
}
changeText() {
this.setState((preState, props) => ({
selected: !preState.selected
}))
}
render() {
return ( <p>
<Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} /> <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
</p>
)
}
}
export default App;6. 注意
class 属性变为
classNametabindex 属性变为
tabIndexfor 属性变为
htmlFortextarea 的值通过需要通过
value属性来指定style 属性的值接收一个对象，css 的属性变为
驼峰写法，如：backgroundColor。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
