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'))

或如：

React.Component //创建组建，使用extends继承

添加Class

ES5：

let hello = React.createElement(

'h1',

{

   className: 'yellow'

},

ReactDOM.render(hello, document.getElementById('app'));

)

ES6：

let world = 'world'

let hello = 
Hello {world}

ReactDOM.render(

    template,

    Document.getElementById('app')

)

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

function tick(){



   let time = new Date().toLocaleTimeString();

   let template = 


   
Hello world

   
现在是: {time}

   

    ReactDOM.render(

        template,

        Document.getElementById('app')

   )

}



setInterval(tick, 1000)

组件

React中组件：

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

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

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

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

有状态组件（React.Component）：

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

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

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

无状态组建

如props传值（无状态组建）

如有状态组建

如props传值（有状态组件）

事件处理

列表渲染

循环Key的使用

列表循环

条件处理

优化写法

条件&事件处理