React笔记-React入门

主要是现在要改一个开源项目，需要学习下React入门，在此记录一下。

几个关键的库

React底层核心：react.development.js

React操作DOM库：react-dom.development.js

解析ES6语法：babel.min.js

React.createElement() //创建元素

如创建一个节点：

let hello = ReactDOM.createElement('h1', {}, 'Hello World')ReactDOM.render() //渲染元素

如：

ReactDOM.render(hello, document.getElementById('app1'))

或如：

<script type = "text/babel">ReactDom.render(<h1>Hello World</h1>document.getElementById('app');)</script>React.Component //创建组建，使用extends继承

添加Class

<style>.yellow{Color: yellow;}</style>

ES5：

let hello = React.createElement('h1',{className: 'yellow'},ReactDOM.render(hello, document.getElementById('app'));)

ES6：

let world = 'world'let hello = <h1 className="yellow">Hello {world}</h1>ReactDOM.render(template,Document.getElementById('app'))

元素渲染（数据动态更新）

function tick(){let time = new Date().toLocaleTimeString();let template = <div><h1 className=”red”>Hello world</h1><h2>现在是: {time}</h2></div>ReactDOM.render(template,Document.getElementById('app'))}setInterval(tick, 1000)

组件

React中组件：

无状态组件（函数式组件）：

①直接定义函数的形式，不存在state，只会有props，没有生命周期；

②只展示不修改用无状态组件；

③传值时无状态组件取值用props.属性。

有状态组件（React.Component）：

①使用class定义，extends继承，有state进行数据的存储和管理，还可以用props，有生命周期；

②不仅仅展示，还要修改，用无状态组建。

③传值时有状态组件取值用this.state或this.props.属性。

无状态组建

<div id="app1"></div><script type="text/babel">//函数式组建function Hello(){return <h1>Hello World</h1>}ReactDOM.render(<Hello/>,Document.getElementById('app1'))</script>

如props传值（无状态组建）

<div id="app1"></div><script type="text/babel">//函数式组建function Hello(){return <div><h1>姓名：{props.name}</h1><h2>年龄：{props.age}</h1></div>}ReactDOM.render(<Hello name="it1995" age="18" />,Document.getElementById('app1'))</script>

如有状态组建

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {//有状态组建需要使用render方法，是生命周期的底层方法render(){return <h1>Hello World</h1>}}ReactDOM.render(<Hello/>,document.getElementById('app1'))</script>

如props传值（有状态组件）

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {//有状态组建需要使用render方法，是生命周期的底层方法render(){return <div><h1>姓名：{this.props.name}</h1><h1>年龄：{this.props.age}</h1></div>}}ReactDOM.render(<Hello name="it1995" age="18"/>,document.getElementById('app1‘’))</script>

事件处理

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {constructor(props){super(props) //需要先让父类先处理下this.state = { //这种情况，只能放到this.state中name: ‘it1995’,age: 20}this.updateInfo = this.updateInfo.bind(this)}updateInfo = () =>{this.setState({ //这里必须用setStatename: 'it1995',age: 18})}updateInfo2(){ //如果这样定义函数this.setState({ //这里必须用setStatename: 'it1995',age: 18})}updateInfo3(){ //如果这样定义函数this.setState({ //这里必须用setStatename: 'it1995',age: 18})}updateInfo4(){ //如果这样定义函数this.setState({ //这里必须用setStatename: 'it1995',age: 18})}//有状态组建需要使用render方法，是生命周期的底层方法render(){return <div><h1>姓名：{this.state.name}</h1><h1>年龄：{this.state.age}</h1><button onClick={this.updateInfo}>更新数据</button><button onClick={this.updateInfo2}>更新数据</button><button onClick={()=>this.updateInfo3()}>更新数据</button><button onClick={this.updateInfo4()}>更新数据</button></div>}}ReactDOM.render(<Hello name="it1995" age="18"/>,document.getElementById('app1'))</script>

列表渲染

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {state = {list: [1, 2,3,4,5]}//有状态组建需要使用render方法，是生命周期的底层方法render(){const arr = this.state.listconst lists = []for(let i = 0; i < arr.length; i++){let li = <li>{arr[i]}</li>lists.push(li)}return <div><ul>{lists}</ul></div>}}ReactDOM.render(<Hello />,document.getElementById('app1'))</script>

循环Key的使用

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {state = {list: [1, 2,3,4,5]}//有状态组建需要使用render方法，是生命周期的底层方法render(){const arr = this.state.listconst lists = []arr.map((item, index) => {let li = <li key={index}>{item}</li>lists.push(li);})return <div><ul>{lists}</ul></div>}}ReactDOM.render(<Hello />,document.getElementById('app1'))</script>

列表循环

<div id="app1"></div><script type="text/babel">class Hello extends React.Component {state = {list: [{id: 1, txt: "Java"},{id: 2, txt: "C/C++"},{id: 3, txt: "JavaScript"}]}//有状态组建需要使用render方法，是生命周期的底层方法render(){const arr = this.state.listconst lists = []arr.map((item, index) => {let li = <li key={index.id}>{item.txt}</li>lists.push(li);})return <div><ul>{lists}</ul></div>}}ReactDOM.render(<Hello />,document.getElementById('app1'))</script>

条件处理

<div id="app1"></div><script type="text/babel">function Login(){return <button>Login</button>}function Logout(){return <button>Logout</button>}class App extends React.Component {state = {isLogin: true}//有状态组建需要使用render方法，是生命周期的底层方法render(){const {isLogin} = this.statereturn <div>{isLogin ? <Login/> : <Logout/>}</div>}}ReactDOM.render(<App/>,document.getElementById('app1'))</script>

优化写法

<div id="app1"></div><script type="text/babel">function Login(){return <button>Login</button>}function Logout(){return <button>Logout</button>}class App extends React.Component {state = {isLogin: true}//有状态组建需要使用render方法，是生命周期的底层方法render(){const isLogin = this.state.isLoginlet buttonif(isLogin)Button = <Login/>elseButton = <Logout/>return <div>{button}</div>}}ReactDOM.render(<App/>,document.getElementById('app1'))</script>

条件&事件处理

<div id="app1"></div><script type="text/babel">function Login(){return <button>Login</button>}function Logout(){return <button>Logout</button>}class App extends React.Component {state = {isLogin: true}updateInfo1 = () =>{this.setState({isLogin: !this.state.isLogin})}updateInfo2(){this.setState({isLogin: !this.state.isLogin})}//有状态组建需要使用render方法，是生命周期的底层方法render(){const isLogin = this.state.isLoginreturn <div>{isLogin ? <Login/> : <Logout/>}<button onClick={this.updateInfo1}>更新数据</button><button onClick={this.updateInfo2.bind(this)}>更新数据</button></div>}}ReactDOM.render(<App/>,document.getElementById('app'))</script>