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({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo2(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo3(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo4(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: '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.list

       const 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.list

       const 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.list

   const 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.state

       return <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.isLogin

       let button

       if(isLogin)

            Button = <Login/>

   else

        Button = <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.isLogin

       return <div>

       {isLogin ? <Login/> : <Logout/>}

   <button onClick={this.updateInfo1}>更新数据</button>

           <button onClick={this.updateInfo2.bind(this)}>更新数据</button>

           </div>

   }

}



ReactDOM.render(

<App/>,

    document.getElementById('app')

)



</script>