react基础知识

基础知识：
1.ReactDOM.render来渲染元素，参数一般有三个：模版的渲染内容(HTML形式)，需要插入的DOM节点，渲染后的回调(一般用不到) React.createElement创建标签（虚拟dom模拟真实dom进行对比差异，然后渲染）
2.引入babel 并且在div下script下添加type="text/babel"属性，即可在script下直接写html标签
3.js里有class对象，在script里为了区分，里面的类名写成className
4.jsx：即在js中编写html代码，同时html中也可以嵌套js代码(是单括号引用的)

Hello,{name}

。
展示 UI 应该呈现的交互本质
const element =

Hello, world!

;
5.元素渲染 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。react是单向绑定， 数据驱动视图。
6.new Date().toLocaleTimeString();获取本地时间字符串
7.组件：多个页面都要用到的。提高开发效率。创建方式：I.函数式组件（无状态组件，没有生命周期）属性通过 props.name方式取得
function Hello(props) { return

{props.name}

}
II.继承自React.Component （有状态组件，有生命周期） 。有状态组件，属性通过this.props.name 方式取得
class Hello extends React.Component{ render(){ return

{this.props.name}

}}
8.生命周期
componentWillMount(){ console.log(‘组件加载前’)//可以进行ajax请求，请求数据操作}
componentDidUpdate(){ console.log(‘数据已经更新’) }
updateUser =()=>{//错误的语法//this.state.name = ‘Time’; this.setState({ name:‘Tim’, age:32 })}
render(){ // 组件发生变化，就会执行render console.log(‘组件加载 或 数据更新’) 更新数据 }
9.事件处理（事件名称为驼峰式命名，如onClick等）
方式1 箭头函数动态绑定updateUser =()=>{}。 直接onClick={this.updateUser}。如果写成updateUser(){…}，就会undefined
如果写成普通函数，有下面三种方式：
方式2 初始化阶段绑定updateUser2对象。 constructor(props){// 在构造函数里初始化props和状态 this.updateUser2 = this.updateUser2.bind(this);}
方式3 onClick中箭头函数直接绑定函数。 onClick={()=>this.updateUser3()}
方式4 onClick={this.updateUser3.bind(this)}
10.必须使用setState才可以调用render
可以直接初始化默认状态 state = {isLogin:false} 在组件里使用 const isLogin = this.state.isLogin
三元表达式 {isLogin?:}
组件的名称一般大写，引用的时候自闭合function Login(){ return 登录} ele =
11.子组件触发父组件的方法
父组件： 是将updateUser方法传递给子组件
子组件：通过props属性接收updateUser方法
function Login(props){ return 登录 }
12.列表渲染

        class List extends React.Component{
            
            state = {
                list:[1,2,3,4,5],
                list2:[
                    {id:1,text:'java'},
                    {id:2,text:'js'},
                    {id:3,text:'php'},
                    {id:4,text:'python'},
                    {id:5,text:'node'}
                ]
            }

            render(){
                const arr = this.state.list;
                const arr2 = this.state.list2;
                const listItem = []
                const listItem2 = []
                //map方式遍历，按照原始数组元素顺序依次处理元素
                arr.map((item)=>{
                    let li = 
{item}
;
                    listItem.push(li);  
                })
                //或for循环，建议加上key，可以缓存，如果下次没有变化可以直接用，提高性能
                 //for (let i = 0; i < arr2.length; i++) {
                 //    let li = 
{arr2[i].text}
;
                 //   listItem2.push(li);
                }
                return 

                        

                            {listItem}
                            {listItem2}
                        
                    
            }
        }
        ReactDOM.render(
                    ,
                document.getElementById('app'));

13.表单应用

        class ToDoList extends React.Component{
            state = {
                value:'',
                list:[]
            }

            handleAdd = ()=>{
               // const val = this.state.value;
               // const list = this.state.list;
                //es6结构语法（等于上面的两行代码）：
                 const{val,list} = this.state;
                list.push(val);
                //数据发生变化，必须调用  this.setState改变这个值，然后自动调用render
                this.setState({
                    list:list
                    //es6中 当key和value相等时，可以省略key
                    //由list:list 简写为 list
                })
            }

            handleInput = (event)=>{
                this.setState({
                    value:event.target.value
                })
            }

            render(){
                const val = this.state.value;
                const arr = this.state.list;
                const listItem = []
                arr.map((item,index)=>{
                    let li = 
{item}
;
                    listItem.push(li);
                })

                return 

                        

                            
                            添加条目    
                        
                        

                            {listItem}
                        
                    
            }
        }
        ReactDOM.render(
                    ,
                document.getElementById('app'));